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

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