在React中使用不同的HTML标记呈现表格单元格（td）

我正在开发一个React应用程序，它从API获取数据并将其呈现到表中。我有三个组件：

行

，

正文

和

表格

<代码>表格获取数据，将其传递到

正文

，

正文

将其传递到

行

，然后呈现单元格

我面临的问题是

行中的数据既是文本又是图像。这是我的
行
组件的外观：

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

但是，我还需要通过
在第四列中呈现静态的小图像。但我无法使用我已实现的当前代码逻辑呈现此图像，即，我无法在
正文中呈现此图像：

，其中
表格标题
为

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

如何在维护可恢复和可扩展的代码体系结构的同时实现所需的功能？
为单元创建新组件

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 Cell=（{colName，value}）=>{
if（colName==='image'）{
返回；
}
//其他可能的单元格类型的其他if
// ...
//否则返回值
返回值；
}

然后更新行组件：

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

const Row=props=>{
返回(
props.data.map（行=>
{props.cols.map（col=>
)}
)
);
}
非常感谢，这是个好主意。然而，我面临着一个问题。我从API接收的数据采用我在问题中指定的
data
数组的形式，因此它没有
Image
字段。除非我使用
map
为每个对象添加
Image
字段，否则使用
row[col.name]
将不起作用。这是低效的，因为阵列很大，包含许多对象。您知道我还可以如何实现这一点吗？您可以依赖col.name来定义渲染单元格的方式。我会用这个想法更新答案。
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>
   )
  );
}