React中重复表格JSX代码重构为统一复用组件的实现建议

核心思路是将结构、样式、公共逻辑完全一致的表格行抽离为独立可复用组件，把存在差异的文本、方法入参抽为组件入参，再通过配置数组循环渲染，消除重复代码。

1. 抽离通用表格行组件 #

把单行的公共结构、逻辑封装为组件，仅将差异点作为props传入：

const CommonTableRow = ({ label, dynamicParam }) => {
  return (
    <tr>
      <td>{label}</td>
      <td className="table-container">
        {formatDate(someMethod1(param1, dynamicParam))}
      </td>
    </tr>
  )
}

2. 配置化循环渲染替代硬编码重复行 #

将所有行的差异数据统一维护在配置数组中，通过数组map方法循环渲染行组件，后续增删改行内容仅需修改配置数组即可：

// 所有行的差异数据统一在此维护
const rowConfigList = [
  { label: "AA", param: a },
  { label: "BB", param: b },
  { label: "CC", param: c }
]

<table className="greyGridTable">
  <tbody>
    {rowConfigList.map(row => (
      <CommonTableRow
        key={row.label /* 优先使用唯一业务字段作为key，无业务唯一值时可临时用数组索引 */}
        label={row.label}
        dynamicParam={row.param}
      />
    ))}
  </tbody>
</table>

方案优势 #

• 公共逻辑单点维护：后续如果需要修改单元格类名、调整格式化逻辑、增减单元格，仅需修改CommonTableRow组件一处即可，无需逐行改动，避免漏改
• 业务数据和视图结构解耦：行内容的调整全部在配置数组中完成，代码可读性更高
• 可扩展性强：后续如果新增行，只需要在配置数组中追加对应项即可，无需重复写DOM结构

注：原代码存在两处JSX语法问题，重构时可顺手修复：一是table标签上的原生class属性在JSX中需要替换为className；二是formatDate(someMethod1(param1,a)缺少闭合右括号，补全后才可正常运行。

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