将两个子组件作为 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的返回元素的函数并不是个好主意，因为它们取决于使用该组件的位置而不同。

- Itziar Urbieta

---

我猜两个classNames应该是data1和data2？ - Kalhan.Toress

这不是最佳实践！你可以添加其他属性或更改结构。 - Martin Rützy

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>

- macborowy

Answer 2

我已经在StackBlitz上创建了一个示例，以便您检查将多个子元素传递给组件的简单解决方案。但为了概括我的解决方案，如果您这样做：

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

您可以在 Component.js （或任何定义组件的地方）中映射（this.props.children.map（{}））属性 children ，以便获取传递给<Component />的每个子项的详细信息。

- Alberto Perez

Answer 3

您可以按以下方式传递多个组件：

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

- Raja Asim

Answer 4

    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}/>

- Mohammed Al-Reai