如何將React的props.children用於多個嵌套組件？

Question

我正在使用React Bootstrap組件構建一個小布局模板。簡化的結構將是：

<Layout 
<Header /> 
<Sidebar /> 
<Content /> 
<Footer /> 
/> 

進口和在應用程序中使用我的組件時，我怎麼能夠「注入」的邊欄，內容，等裏面的一些新反應的組分？

我瞭解到props.childrenhere但感到困惑。我知道我不能像我的情況那樣使用它，但應該按照他們在SplitPane示例中描述的方式（「Containment」部分）使用它。

但是，我多次閱讀我們不應該將道具作爲道具傳遞，這就是他們正在做的事情。

這是我應該這樣做的方式嗎？

Answer 1

您將注入孩子的組件就像HTML：

<Layout 
<Header /> 
<Sidebar /> 
<Content > 
    <SomeChildComponent/> 
</Content> 
<Footer /> 
/>