reactjs - setState 不更新字体很棒的图标

Question

我正在尝试在自己编写的复选框组件中动态渲染字体很棒的图标。当我单击带有很棒字体的图标后尝试更新它的状态时，它没有更新。我尝试将渲染移动到单独的函数，并尝试使用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>
  );
}

Answer 1

据我了解，font Awesome js 操作 DOM，React 操作虚拟 DOM。当 font Awesome js 做自己的事情时，React 无法在状态更改后重新渲染它。我仍在 React 15 上，也许这不是 React 16 中的问题。我刚刚找到了一个解决方案，将每个带有 font Awesome 的元素放在具有唯一键的 div 中。这样 React 就会发现 div 必须更改，因为 key 已更改。