setState 不更新字体真棒图标

Posted 2023-02-15

【中文标题】setState 不更新字体真棒图标

【英文标题】：setState not updating font awesome icon

【发布时间】：2018-09-28 16:02:37

【问题描述】：

我正在尝试在自己编写的复选框组件中动态呈现字体真棒图标。当我在点击它后尝试更新带有字体真棒图标的状态时，它不会更新。我试图将渲染移动到单独的函数并尝试使用 react-fontawesome 但没有任何帮助。状态正在更新，但字体真棒图标与 html 中的 svg 代码相同。

...
state = 
 checked: this.props.checked


toggleCheck = () => 
  this.setState( checked: !this.state.checked );  
;

render () 

  const iconUnchecked = 'far fa-square';
  const iconChecked = 'fas fa-check-square';
  const iconClass = this.state.checked ? iconChecked : iconUnchecked;

  return (
    <span onClick=this.toggleCheck>
      <i className=iconClass />
    </span>
  );

【问题讨论】：

我想你错过了在这里输入const iconUnchecked = 'far fa-square'必须是const iconUnchecked = 'fas fa-square';

问题依旧

首先把iconClass改成let，因为你以后想改。

【参考方案1】：

据我了解，字体 awesome js 操纵 DOM，而 React 操纵虚拟 DOM。当字体真棒 js 做自己的事情时，React 无法在状态更改后重新渲染它。我仍然在 React 15 上，也许这不是 React 16 中的问题。我刚刚找到了一个解决方案，可以将每个字体都很棒的 div 中的唯一键。这样 React 就会看到 div 必须更改，因为 key 已更改。

【讨论】：

这里的关键是将 key 属性放在包含元素上，not 放在应用了 font-awesome 类的元素上。 <button key='unique'><i className='fas' + condition ? 'fa-eye' : 'fa-edit' /></button>

是的，效果很好，您实际上可以使用 this.state.checked 作为唯一键

【参考方案2】：

试试那个https://jsfiddle.net/n5u2wwjg/30533/

对我来说似乎有效

检查 jsfiddle 它是否有效，但不是 sn-p。片段只是为了满足编辑。

class TodoApp extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      checked: this.props.checked
    
    this.toggleCheck = this.toggleCheck.bind(this);
  
  
  toggleCheck() 
    this.setState( checked: !this.state.checked );  
  
  
  render() 
    const iconUnchecked = 'far fa-square';
  	const iconChecked = 'fas fa-check-square';
  	let iconClass = this.state.checked ? iconChecked : iconUnchecked;

    return (
      <span onClick=this.toggleCheck>
        <i className=iconClass />
      </span>
    )
  


ReactDOM.render(<TodoApp />, document.querySelector("#app"))

body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;


#app 
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;


li 
  margin: 8px 0;


h2 
  font-weight: bold;
  margin-bottom: 15px;


.done 
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;


input 
  margin-right: 5px;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div id="app"></div>

【参考方案3】：

我也遇到了同样的麻烦。正如 200Ok 正确提到的那样， svg--inline-fa 不是虚拟 DOM，因此它永远不会更新。解决问题的最佳方法是包装包含决定性类的字体真棒元素。