Блог

Я новичок в 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>
 

Спасибо

Вы хотите сказать , что хотите превратить каждый фрагмент , который вы сопоставили , 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 , чтобы в итоге не получился вложенный массив. Вы можете сделать это с помощью spread operator ( ... ), предполагая, что ваш проект его поддерживает.

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