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