React中如何将td转为th或克隆属性？技术实现问询

问题背景 #

以下是我编写的React表格代码：

<table className={classes.deviceTable + ' deviceTable'}>
  <thead></thead>
  <tbody>
      {tickets.map(t => {
              let header = true

              return ITicketKeys.map(k =>{
                  let isMockHeader = !!header;
                  let cls = isMockHeader? classes.th : undefined;
                  header = false;

                  // 希望当isMockHeader为true时，这里的<td>替换为<th>
                  let t1 = <td key={k as string} className={cls}>{humanize(k as string)}</td>
                  let t2 = <td key={k + 'v'} className={cls}>{t[k]}</td>
                  return (
                  <tr key={k as string}>
                  </tr>);
              });
      })}
  </tbody>
</table>

我希望当isMockHeader为true时，将代码中的<td>替换为<th>，现咨询：

1. 能否将<td>元素的props克隆到<th>元素上？
2. 能否构建props对象，条件式应用到<td>或<th>？
3. 是否存在类似React.cloneElement的方法，可仅克隆props或克隆时修改标签类型？

解决方案 #

1. 关于克隆<td>的props到<th> #

完全可以，但没必要用复杂的克隆操作。你可以直接把要传给<td>的props提前抽离成对象，再根据条件传给<th>，效果和克隆props一致。如果非要用克隆思路，你可以先创建<td>元素，再提取它的props属性来渲染<th>，但这属于多此一举，直接复用props对象更高效。

2. 构建props对象并条件应用 #

当然可以，这是最推荐的写法。先把通用的props（比如className、key）整理成对象，再根据isMockHeader的状态，决定将这些props传递给<th>还是<td>。如果有部分props是条件性的，还可以用扩展运算符动态添加。

3. 修改标签类型的方法 #

React.cloneElement无法修改元素的标签类型——它只能基于已有元素的类型进行克隆并修改props或子元素。更简单高效的方式是动态指定标签组件：用变量存储要渲染的标签名（'th'或'td'），然后直接渲染该标签并传入props。

修改后的代码示例 #

<table className={`${classes.deviceTable} deviceTable`}>
  <thead></thead>
  <tbody>
    {tickets.map(t => {
      let header = true;
      return ITicketKeys.map(k => {
        const isMockHeader = !!header;
        header = false;
        
        // 1. 构建通用props对象
        const baseCellProps = {
          className: isMockHeader ? classes.th : undefined
        };

        // 2. 动态选择标签类型
        const CellTag = isMockHeader ? 'th' : 'td';

        return (
          <tr key={k}>
            <CellTag {...baseCellProps} key={k}>{humanize(k)}</CellTag>
            <CellTag {...baseCellProps} key={`${k}v`}>{t[k]}</CellTag>
          </tr>
        );
      });
    })}
  </tbody>
</table>

如果需要给<th>添加额外专属props（比如scope="row"），可以这样扩展：

const cellProps = {
  ...baseCellProps,
  ...(isMockHeader ? { scope: 'row' } : {})
};

内容的提问来源于stack exchange，提问作者Maslow