在 React 中使用不同的 HTML 标签渲染 table 个单元格 (td)

Question

我正在开发一个 React 应用程序，它从 API 获取数据并将其呈现到 Table。我有 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;
}

然后更新行组件：

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>
   )
  );
}

在 React 中使用不同的 HTML 标签渲染 table 个单元格 (td)

Render table cells (td) with different HTML tags in React

html

reactjs

jsx

code-reuse