如何在html中使用两个组件答案

【问题标题】：How to use two components in html如何在html中使用两个组件
【发布时间】：2026-01-21 22:50:01
【问题描述】：

我想在一个 html 中使用两个组件。

例如

索引.html：

</div>

<div id='rightComp'>
</div>

app.jsx:

window.onload=function(){
    React.render(
       <leftcomp/>, document.getElementById('leftComp')
       <rightComp/>, document.getElementById('rightComp')
    )
}

【问题讨论】：

标签： javascript reactjs gulp

【解决方案1】：

调用React.render 两次，每个 React 元素/DOM 节点对调用一次。

window.onload=function(){
    React.render(<leftcomp/>, document.getElementById('leftComp'))
    React.render(<rightComp/>, document.getElementById('rightComp'))
}

话虽如此，更好的做法是让一个组件同时包含leftcomp 和rightcomp，然后将该包装器组件呈现到单个 DOM 节点中。

【讨论】：