将两个子元素作为 props 传递给 React 组件

Question

我有一个这样的组件

    const Component = () => {
     return (
    <div>
       <div className="data1">
         {children}
       </div>
       <div className="data1">
         {children2}
       </div>
    </div>
)
    }

我希望在“data1”div 中包含 Item1 和 Item2，在“data2”div 中包含一些其他组件。编写下一个代码我只有 Item1 和 Item2 作为子项，但我不知道如何传递第二个子项（例如 Item3 和 Item4）

<Component>
  <Item1/>
  <Item2/>
</Component>

我必须在应用程序中多次重用该组件，因此返回元素的名为children2的函数不是一个好主意，因为它们根据我使用该组件的位置而有所不同。

Answer 1

推荐的方法是为每个孩子创建自定义道具：

const App = () => <Component child1={<Item1 />} child2={<Item2 />} />

const Component = ({child1, child2}) => {
  return (
    <div>
      <div className="data1">
        {child1}
      </div>
      <div className="data1">
        {child2}
      </div>
    </div>
  )
}

const Item1 = () => <p>Item 1</p>
const Item2 = () => <p>Item 2</p>

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>