Визуализация ячеек таблицы (td) с различными тегами HTML в React

Question

Я занимаюсь разработкой приложения React, которое извлекает данные из API и отображает их в виде таблицы. У меня есть 3 компонента: Row, Body и Table. Table извлекает данные, передает их Body, Body передает их Row, которые затем визуализируют ячейки.

Проблема, с которой я сталкиваюсь, состоит в том, что данные в Row представляют собой как текст, так и изображения. Вот как выглядит мой Row компонент:

const Row = props => {
  return(
    props.data.map(row =>
      <tr key={row.id}>
          {props.cols.map(col =>
             <td>{row[col.name]}</td>
          )}
      </tr>
   )
  );
}

Данные, извлеченные из API, имеют вид:

data = [
  {
    "firstName": "Jack",
    "lastName": "Sparrow",
    "id": "jckspr"
  }
]

Однако мне также необходимо визуализировать небольшое изображение статически в четвертом столбце с помощью <img src="images/logo.png">. Но я не могу отрисовать это изображение с помощью текущей логики кода, которую я реализовал, т.е. я не могу отрендерить это в Body:
<Row data={data} cols={tableHeaders}>, с tableHeaders, являющимся

[
  { header: "First Name", name: "firstName" },
  { header: "Last Name", name: "lastName" },
  { header: "id", name: "id" },
  { header: "Image", name: "image" }
]

Как достичь желаемой функциональности, поддерживая архитектуру кода с возможностью повторного использования и расширения?

Answer 1

Создайте новый компонент для ячеек

const Cell = ({ colName, value }) => {
  if (colName === 'image') {
    return <img src="images/logo.png" />;
  }
  // Other if's for other possible cell types
  // ...
  // Otherwise return the value
  return value;
}

Затем обновите компонент Row :

const Row = props => {
  return(
    props.data.map(row =>
      <tr key={row.id}>
          {props.cols.map(col =>
             <td>
               <Cell colName={col.name} value={row[col.name]} />
             </td>
          )}
      </tr>
   )
  );
}