我想使用React在整个DOM中多次添加组件。 This fiddle显示了我要做的事情,并没有出现任何错误。这是代码:
HTML:
<div id="container">
<!-- This element's contents will be replaced with the first component. -->
</div>
<div id="second-container">
<!-- This element's contents will be replaced with the second component. -->
</div>
JS:
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
React.render(<Hello name="Second World" />, document.getElementById('second-container'));
我见过this question,我担心通过上述操作,我会冒险让React组件相互干扰。这个问题的答案建议使用服务器端渲染,这对我来说不是一个选项,因为我正在使用Django服务器端。
另一方面,也许我正在做的是好的,因为我只安装了一个React库的实例(而不是多个组件调用它们自己的React实例)?
这种使用多个DOM实例的方法是否可以使用React?
答案 0 :(得分:94)
是的,在同一页面上多次拨打React.render
是完全可以的。正如您所建议的那样,React库本身只加载一次,但每次调用React.render
都会创建一个独立于其他组件的新组件实例。 (事实上,在转换到React的网站上,这种情况并不少见,其中网页的某些部分是使用React.render
生成的,而其他部分则不是。)
答案 1 :(得分:4)
从页面加载性能的角度来看,这种方法是可以的,但是还有其他缺点,如果可能,应避免多个React根源。
答案 2 :(得分:0)
如果您想知道是否可以在同一个容器中多次使用 ReactDOM.render(),docs 会说:“如果 React 元素之前被渲染到 [ same] 容器,这将对其执行更新,并且仅在必要时改变 DOM 以反映最新的 React 元素"