如何在一系列子组件中重用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>