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

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

对我来说似乎有效

准确检查 jsfiddle 是否有效，但不是片段。摘录只是为了让编辑满意。

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>

Answer 2

据我所知，js 操纵字体 awesome DOM 而 React 操纵虚拟字体 DOM。当 font awesome js 做自己的事情时，React 无法在状态更改后重新渲染它。我仍在使用 React 15，也许这不是 React 16 中的问题。我刚刚找到了一个解决方案，可以将每个字体都放在带有唯一键的 div 中。通过这种方式，React 看到 div 必须更改，因为密钥已更改。

Answer 3

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

的字体 awesome 元素

setState 不更新字体真棒图标

setState not updating font awesome icon

setstate

font-awesome

reactjs