子コンポーネントのシーケンスでHTMLコンポーネントラッパーを再利用する方法は？

Question

私は、コンポーネントのhtmlラッパーを再利用することについて非常に簡単な質問があると思っています。しかし、私はそれを行うための「正しい」方法が何であるか分かりません。

それぞれに対して同じ（複雑な）htmlラッパーを再利用する一連のコンポーネントをレンダリングしたいとします。次に、そのラッパーの内部に異なる子コンポーネントのセットをレンダリングします。

(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> 

高度な提案が必要です。私が思っていることはすべて「ハッキングしている」ような気がする。

Answer 1

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

その後

<Layout> 
    <ChildComponent /> 
</Layout>