将两个孩子作为道具传递给 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 的 function 不是一个好主意，因为它们根据我使用组件的位置而有所不同。

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>

Answer 2

我制作了一个StackBlitz ，以便您检查一个简单的解决方案，以将多个子项传递给一个组件。 但是要恢复我的解决方案，如果您这样做：

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

您可以在Component.js （或任何定义了 Component 的地方）map (this.props.children.map({}))中的 prop children项，以便将每个子项的详细信息传递给<Component /> 。

Answer 3

    till me if it work
const Component = (item1,item2) => {
         return (
        <div>
           <div className="data1">
             {item1}
           </div>
           <div className="data1">
             {item2}
           </div>
        </div>
    )
        }
    how to used it
    which item one what you want to add  as item like this <item1/>
    <Component item1={item1} item2={item2}/>

Answer 4

您可以传递多个组件，如下所示：

import React from 'react'

function Child (props)  {
    return (<>
        <div>{props.child1}</div>
        <div>{props.child2}</div>
          </>
    )
}

export default Child

import React from 'react'

function Parent {
    return (
        <>
        <Child
            children1={<Item1/>}
            children2={<Item2/>}
         />
         </>
     )
}

export default Parent