reactjs - 反应如何渲染单个元素，该元素在表格行中具有不同的多个子元素

Question

我是 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>

谢谢

标签： reactjstypescript

Answer 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>
    </>
  ))
])