如果 Prop 被稱為子組件，如何將數據傳遞給組件 - React JS

Question

我正在從事一項需要將數據傳遞到表的任務。 該表有它自己的數據類型和道具。 當我應用邏輯時，我需要遵循同樣的原則。 現在我正在嘗試動態傳遞數據。 但是當我試圖動態傳遞數據時，我沒有得到表體中的值。 任何人都可以指導我如何動態填充數據。 使用表格組件時，我需要遵循以下格式

**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>

Answer 1

在這里使用map會是更好的選擇，由於forEach()返回值的方式，您會變得未定義

與map一樣， forEach()方法接收一個函數作為參數，並對每個數組元素執行一次。 但是，它不會返回像 map 這樣的新數組，而是返回undefined 。 正如您在下面的答案中看到的

代碼：

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

如果 Prop 被稱為子組件，如何將數據傳遞給組件 - React JS

問題描述

1 個解決方案

解決方案1
0 2022-07-11 16:15:13

如果 Prop 被稱為子組件，如何將數據傳遞給組件 - React JS

問題描述

1 個解決方案

解決方案1 0 2022-07-11 16:15:13

解決方案1
0 2022-07-11 16:15:13