Wie Reacts props.children für mehrere verschachtelte Komponenten verwenden?

Question

Ich baue eine kleine Layout-Vorlage mit React Bootstrap-Komponenten. Die vereinfachte Struktur wird:

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

Beim Import und Verwendung meiner Komponente in einer App, wie ich in der Lage sein „injizieren“ einige neue Reagieren Komponenten innerhalb der Sidebar, der Inhalt, usw.?

Ich erfuhr über props.childrenhere aber ich war verwirrt. Ich habe verstanden, dass ich das nicht so verwenden kann, wie es für meinen Fall ist, aber sollte es stattdessen so verwenden, wie es im SplitPane-Beispiel (Abschnitt "Containment") beschrieben wird.

Allerdings habe ich viele Male gelesen, dass wir Komponenten nicht als Requisiten übergeben sollten, und das tun sie.

Ist das die Art, wie ich es tun sollte?

Answer 1

Sie Kinder jene Komponente injizieren wie in html:

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