做出危险的反应SetInnerHTML 不重新呈现内容答案

【问题标题】：react dangerouslySetInnerHTML not re-rendering content做出危险的反应SetInnerHTML 不重新呈现内容
【发布时间】：2018-06-02 08:25:13
【问题描述】：

这是我的设置：

字符串文件.properties

someKey=This is my <span class="hello">{0}</span> string!

react-file.jsx

import stringAPI from 'string-file';    

class MyComponent extends Component {

    get content() {
        return { __html: stringAPI.someKey(this.props.word) };
    }

    render() {
        return (
            <span dangerouslySetInnerHTML={this.content} />
        );
    }
}

stringAPI.someKey 的参数被替换为字符串文件中的{0}，然后返回最终的 html 字符串。我的问题是this.props.word 正在更新，而MyComponent 没有更新。

我在某处读到，dangerouslySetInnerHTML 告诉 React 它不需要查看渲染 html 的组件的状态。如果这是真的，那么我仍然需要一种方法来做我想做的事情。

【问题讨论】：

您可以尝试将字符串设置为父组件中的状态并将其作为道具传递给 MyConponent

标签： javascript reactjs

【解决方案1】：

将字符串设置为状态。当收到新的道具 (componentWillReceiveProps) 时，请执行 setState。这应该重新渲染组件。如果这不起作用，请确保在字符串更改时设置了唯一键。这也会强制重新渲染

【讨论】：