ReactJS：React 尝试在容器中重用标记，但校验和无效错误答案

【问题标题】：ReactJS: React attempted to reuse markup in a container but the checksum was invalid errorReactJS：React 尝试在容器中重用标记，但校验和无效错误
【发布时间】：2018-03-04 07:24:16
【问题描述】：

我正在尝试插入将加载外部脚本的 javascript 嵌入。我是这样做的：

class Live extends Component {

    componentWillMount() {
        this.setState({ stream: '<script src="https://content.jwplatform.com/players/CcXHdSyi-r6Pl0rxU.js"></script>' });
    }

    render() {
        return (
            <div>
                <div contentEditable='true' dangerouslySetInnerHTML={{ __html: this.state.stream }}></div>
            </div>
        );
    }

}

我得到的错误是：

warning.js?85a7:35 警告：React 试图在容器，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记是不是客户所期望的。 React 注入了新的标记补偿哪些有效，但您失去了许多好处服务器渲染。相反，找出生成标记的原因在客户端或服务器上有所不同：（客户端）“ data-reactid="1">

为什么会这样？

【问题讨论】：

Adding script tag to React/JSX的可能重复

标签： javascript node.js reactjs

【解决方案1】：

React 给出了相当广泛的答案；）

...您正在使用服务器渲染，而在服务器上生成的标记不是客户端所期望的

这不是错误，而是警告。首先在 Node 服务器上生成 html 标记，然后发送到浏览器。然后在浏览器中反应再次呈现页面并尝试重用已经由服务器发送的标记。如果它们之间存在差异 - 它会打印此警告并使用客户端生成的标记，而不考虑服务器发送的内容。

React 注入了新的标记来补偿哪些工作，但您已经失去了服务器渲染的许多好处。

我不确定，但如果您将 componentDidMount 更改为 componentWillMount 可能会有所帮助，因为您的脚本标签也会在服务器上设置。

如果您不确定如何正确处理此问题，我建议您使用 react-helmet 之类的库来处理此类情况。或者你正在使用Next.js？他们有自己的方法。

【讨论】：

【解决方案2】：

试试

componentWillMount() {
 this.setState(
    { stream: require( '/path/to/your/script/players/CcXHdSyi-r6Pl0rxU'),
 }); }

【讨论】：