Wie wird der HTML-Komponenten-Wrapper in einer Folge von untergeordneten Komponenten wiederverwendet?

Question

Ich habe, was ich dachte, wäre eine sehr einfache Frage über die Wiederverwendung von HTML-Wrappern für Komponenten. Aber ich bin nicht sicher, was der "richtige" Weg ist, es zu tun.

Ich möchte eine Reihe von Komponenten, die den gleichen (komplexen) HTML-Wrapper für jede von ihnen wiederverwenden. Rendern Sie dann die Menge verschiedener untergeordneter Komponenten innerhalb dieses Wrappers.

(render 10 of these:) 
<div i start> 
    <div start reusable wrapper> 

     <child component - one of ten different components, one after the other> 

    <div end reusable wrapper 

<div i end> 

Ich brauche nur einen Vorschlag auf hohem Niveau. Ich habe das Gefühl, dass alles, was ich denke, "hacken" ist.

Answer 1

const Layout = props => (
    <div whateverattributes> 
    <div whateverotherattributes> 
     {props.children} 
    </div> 
    </div> 
); 

Dann

<Layout> 
    <ChildComponent /> 
</Layout>