反应如何在表格行的不同 <td> 中呈现具有多个子元素的单个元素答案

【问题标题】：React how to render single element which got multiple child element in different <td> in table row反应如何在表格行的不同 <td> 中呈现具有多个子元素的单个元素
【发布时间】：2021-01-11 17:34:45
【问题描述】：

我是 React 新手。我有以下代码块，该代码块被返回并发送到组件以在 html 表中呈现。目前我正在使用类似下面的东西。有没有更好的方法

bodyItems = sorted.map((data) => [
  data.employerName,
  data.sectors.map((sector) => <div>{sector.name}</div>),
  data.sectors.map((sector) => (
    <div>
      {sector.assignedLearners > 0
        ? `${sector.assignedLearners} learners`
        : 'Unassigned'}
    </div>
  )),
  data.lastModified
  ]

渲染为：

bodyItems.map((entry, rowIndex) => (
    <tr key={rowIndex}>
      {entry.map((cell, colIndex) => (
        <td key={colIndex}>{cell}</td>
      ))}
    </tr>
  ))

任何人都可以帮助如何在组件中单独呈现扇区的每个 div。

预期输出：

<tr>
  <td>Employer Name</td>
  <td>
    <div>Sector 1</div>
    <div>Sector 2</div>
  </td>
  <td>
    <div>20 Learners</div>
    <div>10 learners</div>
   </td>
  <td>
  <!-- ... additional properties-->
  </td>
</tr>

谢谢

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

您是说要将每个从data.sectors 映射的片段渲染到它自己的<td> 中吗？所以你得到了这样的表结构？

<tr>
  <td>Employer Name</td>
  <td>
    <div>Sector 1</div>
    <div>2 learners</div>
  </td>
  <td>
    <div>Sector 2</div>
    <div>Unknown</div>
  </td>
  <!-- ... additional sectors -->
</tr>

如果是这样，您需要展平使用data.sectors.map 创建的数组，这样您就不会得到嵌套数组。假设您的项目支持，您可以使用扩展运算符 (...) 来完成此操作。

bodyItems = sorted.map((data) => [
  data.employerName,
  ...data.sectors.map((sector) => (
    <>
      <div>{sector.name}</div>
      <div>
        {sector.assignedLearners > 0
          ? `${sector.assignedLearners} learners`
          : 'Unassigned'}
      </div>
    </>
  ))
])

或者，您可以使用flatMap。

bodyItems = sorted.flatMap((data) => [
  data.employerName,
  data.sectors.map((sector) => (
    <>
      <div>{sector.name}</div>
      <div>
        {sector.assignedLearners > 0
          ? `${sector.assignedLearners} learners`
          : 'Unassigned'}
      </div>
    </>
  ))
])

【讨论】：