是否可以在DOM中多次使用React.render()?

我想要使​​用React在整个DOM中多次添加组件。 这小提琴显示我想要做什么,它不会抛出任何错误。 代码如下:

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')); 

我已经看到了这个问题 ,恐怕通过这样做会使React组件互相干扰。 这个问题的答案build议使用服务器端渲染,这不是我的select,因为我使用的是Django服务器端。

另一方面,也许我在做什么是好的,因为我只有一个React库的实例挂载(而不是多个组件调用自己的React实例)?

这种使用多个DOM实例的方式可以使用React吗?

是的,在同一页面上多次调用React.render是完全正确的。 就像你所build议的那样,React库本身只加载一次,但是每次调用React.render都会创build一个独立于其他组件的新组件实例。 (事实上​​,在过渡到React的网站上,这种情况并不less见,其中网页的某些部分是使用React.render生成的,其他部分则不是。)