javascript - 如何在html中使用两个组件

Question

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

例如

index.html:

</div>

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

app.jsx:

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

Answer 1

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

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

话虽如此，最好的做法是拥有一个同时包含 leftcomp 和 rightcomp 的组件，并将该包装器组件渲染到单个 DOM 节点中。