setState未更新字体很棒的图标
setState未更新字体很棒的图标
提问于 2018-04-18 20:02:08
我正在尝试在自己编写的checkbox组件中动态地呈现令人敬畏的字体图标。当我在点击一个带有字体的图标时，它并没有更新。我试着将渲染移到单独的函数中，并尝试使用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>
);
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-04-19 15:56:27
据我所知，字体很棒，js操作DOM，React操作虚拟DOM。当字体很棒时，js自己做东西，在状态改变后React不能重新渲染它。我还在使用React 15，也许这不是React 16中的问题，我只是找到了一个解决方案，把每个字体很棒的东西都放在一个有唯一键的div中。这样可以看出div必须更改，因为key被更改了。
Stack Overflow用户
发布于 2018-04-18 21:11:02
试试那个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>
Stack Overflow用户
发布于 2019-04-22 00:55:49
我也面临着同样的麻烦。正如200Ok提到的那样，svg--inline-fa不是一个虚拟的DOM，所以它永远不会更新。解决这个问题的最好方法就是包装包含decisive类的字体元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49899245
复制相关文章
相似问题