如何在一系列子组件中重用 HTML 组件包装器？答案

【问题标题】：How to re-use HTML component wrapper in a sequence of child components?如何在一系列子组件中重用 HTML 组件包装器？
【发布时间】：2017-07-14 17:05:25
【问题描述】：

关于重用组件的 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>

我只需要一个高水平的建议。我觉得我想到的一切都是在“破解它”。

【问题讨论】：

我不明白这个问题。你能提供一个更具体的例子吗？

标签： reactjs components children code-reuse

【解决方案1】：

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

然后

<Layout>
  <ChildComponent />
</Layout>

【讨论】：

谢谢。我知道这很简单，而且我是新手。 :)