ReactJS：React试图在容器中重用标记，但校验和是无效的错误

我试图插入一个JavaScriptembedded，将加载一个外部脚本。 我正在这样做：

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

为什么发生这种情况？

Answer 1

你可以通过React得到相当广泛的回答;）

…你正在使用服务器渲染，服务器上生成的标记不是客户期望的

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

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

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

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

Answer 2

尝试

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