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警告：React试图在a中重用标记容器但校验和无效。这通常意味着你正在使用服务器呈现和服务器上生成的标记不是客户所期待的。反应注入新标记弥补哪些有效，但你失去了很多好处服务器渲染。相反，弄清楚为什么要生成标记在客户端或服务器上是不同的:(客户端）＆＃34; 数据reactid =＆＃34; 1＆＃34;＆GT;

为什么会这样？

Answer 1

React得到了相当广泛的答案;）

...您正在使用服务器呈现，并且服务器上生成的标记不是客户端所期望的

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

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

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

如果您不确定如何正确处理此问题，我建议您使用类似react-helmet的库来处理此类案例。或者你可能正在使用Next.js？他们有自己的方式去做。

Answer 2

尝试

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

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

2 个答案: