时间戳

首页 > 解决方案 > 将两个孩子作为道具传递给 React 组件

javascript - 将两个孩子作为道具传递给 React 组件

问题描述

我有一个这样的组件

    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 的函数不是一个好主意，因为它们根据我使用组件的位置而有所不同。

标签： javascriptreactjschildren

解决方案

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

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>

推荐阅读