React JS中Prop为children类型的表格组件如何动态传递数据

核心问题定位 #

你遇到的单元格内容全为undefined的问题，由两个高频错误导致：

• 所有表格系列组件仅识别children作为内容传参prop，你如果把字段值通过name/id这类自定义属性传给单元格组件，组件根本无法读取对应值，所有要展示的内容必须放在组件标签的子节点位置
• 遍历生成节点时如果用forEach，不会返回JSX节点数组，上层组件接收到的children会是空值/undefined，动态列表渲染必须用map遍历返回节点

参考校验：标准静态用法 #

动态写法必须完全对齐静态用法的prop传参逻辑，不要给组件传入未定义的自定义属性

// 组件官方标准静态写法
<Table>
  <TableHeader>
    <TableRow>
      <TableHeaderCell>名称</TableHeaderCell>
      <TableHeaderCell>ID</TableHeaderCell>
      <TableHeaderCell>分组</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>测试数据</TableCell>
      <TableCell>1001</TableCell>
      <TableCell><Batch groupInfo={{id: 'g1'}} /></TableCell>
    </TableRow>
  </TableBody>
</Table>

错误写法示例（避坑） #

// 两个典型错误
const tableRows = []
mockData.forEach(row => {
  tableRows.push(
    <TableRow>
      {/* 错误1：组件未定义name/id/group这类prop，传了也读不到 */}
      {/* 错误2：单标签没有子节点，children为空 */}
      <TableCell name={row.Name} id={row.ID} group={row.Group} />
    </TableRow>
  )
})

可直接复用的正确实现 #

// 列配置统一维护，支持自定义渲染
const columnConfig = [
  { title: '名称', dataIndex: 'Name' },
  { title: 'ID', dataIndex: 'ID' },
  { title: '分组', dataIndex: 'Group', render: (groupData) => <Batch data={groupData} /> }
]

export default function DataTable({ sourceData = [] }) {
  return (
    <Table>
      {/* 表头渲染 */}
      <TableHeader>
        <TableRow>
          {columnConfig.map(col => (
            <TableHeaderCell key={col.dataIndex}>
              {/* 列头文字作为children传入 */}
              {col.title}
            </TableHeaderCell>
          ))}
        </TableRow>
      </TableHeader>
      {/* 表体渲染 */}
      <TableBody>
        {sourceData.map((row, rowIdx) => (
          <TableRow key={row.ID || rowIdx}>
            {columnConfig.map(col => (
              <TableCell key={`${rowIdx}-${col.dataIndex}`}>
                {/* 所有单元格内容都作为children传入，自定义组件在这里渲染 */}
                {col.render ? col.render(row[col.dataIndex]) : row[col.dataIndex]}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

二次排查清单 #

改完仍有异常按顺序核对：

• 遍历生成节点统一用map，不要用forEach；如果map回调写了花括号，必须手动return对应的JSX节点
• 所有展示内容（文本、自定义组件）都放在组件标签的子节点位置，不要给Table系列组件传文档未定义的自定义prop
• 打印sourceData核对字段名大小写，避免因字段名写错（比如把Name写成name）导致取值为undefined
• 检查Batch组件的边界逻辑，确认传入对应数据时不会返回undefined/null

内容的提问来源于stack exchange，提问作者dev_to_be