Question

我正在尝试在自己编写的复选框组件中动态渲染字体真棒图标。当我在点击它时尝试用字体awesome图标更新状态时，它没有更新。我试图将渲染移动到单独的功能，并尝试使用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必须改变因为键被改变了。

Answer 2

试一下https://jsfiddle.net/n5u2wwjg/30533/

对我来说似乎有效

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

＆＃13;

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"))

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

setState不更新字体真棒图标

3 个答案: