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>

我必须多次将Component重复使用到应用程序中，所以一个名为children2的函数返回元素并不是一个好主意，因为它们取决于我在哪里使用该组件。

Answer 1

The recommended way是为每个孩子创建自定义道具：

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（或定义组件的任何地方）中映射(this.props.children.map({}))的道具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}/>

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

3 个答案: