多个ReactDOM.render函数？
多个ReactDOM.render函数？
提问于 2019-09-03 15:01:26
我开始学习react，在调用多个ReactDOM.render函数时遇到问题：
react：
class Header extends React.Component{
render(){
return(
<div>
<p>Test1</p>
</div>
)
}
};
class Main extends React.Component {
render(){
return(
<section>
<p>Test2</p>
</section>
)
}
};
ReactDOM.render(<Main />, document.getElementById('root2'));
ReactDOM.render(<Header />, document.getElementById('root'));html部件：
<body>
<div id="root"></div>
<div id="root2"></div>
</body>我得到了一个错误：
目标容器不是DOM元素。
在搜索这个问题时，我得到的信息是，应该可以多次调用ReactDom.render。所以我很感谢你的帮助！
编辑:只是尝试了一个html标签，并更改了id。当id不是“root”时，它似乎有问题...
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-03 15:05:34
你是对的，你应该能够在你的代码中多次调用render。
但是你为什么不这样做呢？
Class App extends Component {
render(){
<React.Fragment>
<Header />
<Main />
</React.Fragment>
}
}
ReactDOM.render(<App />, document.getElementById('root'))这是更容易，正确和性能优越的。
我真的看不出为什么有人需要在一个页面上放置两个不同的渲染器。这无缘无故地给浏览器带来了更多的压力，它会减慢你的应用程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57766513
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号