如果 Prop 被称为子组件，如何将数据传递给组件 - React JS答案

【问题标题】：How to pass data to component if it's Prop is mentioned as child - React JS如果 Prop 被称为子组件，如何将数据传递给组件 - React JS
【发布时间】：2022-07-12 00:15:13
【问题描述】：

我正在执行一项需要将数据传递到表的任务。该表有它自己的数据类型和道具。当我应用逻辑时，我需要遵循同样的原则。现在我正在尝试动态传递数据。但是当我试图动态传递数据时，我没有得到表体中的值。任何人都可以指导我如何动态填充数据。使用表格组件时需要遵循以下格式

**Table Props:**

1. Table PROPS- Prop: Children Type: Node default:[] (Desc: the child
    content for table consisting of eithera Table Header or Body)
      
 2. Table Header Props- Prop: Children Type: node default:[]

 3. Table Header Cell props - prop:children type:node default:[](Desc:
    content to display for column header)

 4. Table Row Props - Prop: Children Type: node default:[] (Desc: child
    table cells to be placed within the tr)

 5. Table Cell Props - Prop: Children Type: node default:[] (Desc:
    content to be displayed for row cell)

我的代码

<Table paddingStyle="compact">
      <Header>
      <HeaderCell key="Name">Name</HeaderCell>
        <HeaderCell key="ID">ID</HeaderCell>
        <HeaderCell key="Group">Group</HeaderCell>
      </Header>
      <Body>
        {mockData.forEach((element) => {
            element.cells.forEach(cell => {
                return (
        <Row key={element.key}> 
        <Cell>{cell.Name}</Cell> // In console I ma getting undefined
         <Cell>{cell.ID}</Cell> // In console I ma getting undefined       
         <Cell><Batch {cell.Group}/></Cell> // In console I ma getting undefined
        //Batch component will be imported
        </Row>
                )
        })
        })
  }

JSON 数据

[
{
    "key":"k-01",
    "cells":[
      { key: '0',  Name: 'ABC' },
      { key: '1',  ID: '123' },
      { key: '2',  Group: ['1', '2'] },
    ]

]

表格组件格式

<Table>
    <Header>
      <HeaderCell key="NAME">Name</HeaderCell>
      <HeaderCell key="ID">ID</HeaderCell>
      <HeaderCell key="Group">Group</HeaderCell>
    </Header>
    <Body>
      <Row key="0">
        <Cell key="NAME">ABC</Cell>
        <Cell key="ID">1</Cell>
        <Cell key="Group">I, O</Cell> // in the form of label or React-bootstarp badge(Example)
      </Row>
    </Body>
  </Table>

【问题讨论】：

标签： javascript reactjs arrays

【解决方案1】：

在这里使用map 会是更好的选择，由于forEach() 返回值的方式，您变得不确定

与map 一样，forEach() 方法接收一个函数作为参数，并对每个数组元素执行一次。但是，它不会返回像 map 这样的新数组，而是返回 undefined。正如您在下面的答案中看到的那样

代码：

    const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

【讨论】：