javascript - ReactJS:React 尝试在容器中重用标记，但校验和无效错误

Question

我正在尝试插入一个 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 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) " data-reactid="1">

为什么会发生这种情况？

Answer 1

你可以通过 React 得到相当广泛的答案;)

...you are using server rendering and the markup generated on the server was not what the client was expecting

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

React injected new markup to compensate which works but you have lost many of the benefits of server rendering.

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

如果您不确定如何正确处理这个问题，我建议您使用像 react-helmet 这样的库它处理这样的情况。或者也许您正在使用 Next.js？他们有自己的方式来做到这一点。