建议将代码重构为简单的方式 -React

Question

我有多个具有相同的类名和具有不同参数的方法，我想将下面的代码重构为更简单的方式，任何建议都会有所帮助。

<table class="greyGridTable">
  <tbody>
    <tr>
      <td>AA</td>
      <td className = 'table-container'>{formatDate(someMethod1(param1,a)}</td>
    </tr>
    <tr>
      <td>BB</td>
      <td className = 'table-container'>{formatDate(someMethod1(param1,b)}</td>
    </tr>
    <tr>
      <td>CC</td>
      <td className = 'table-container'>{formatDate(someMethod1(param1,c)}</td>
    </tr>
  </tbody>
</table>

我想用相同的组件重构代码。

Answer 1

我希望这会有所帮助。谢谢

\n

export const TableItems = ({data}) => {\n  return (\n    <>\n      {data.map(item => (\n        <tr>\n          <td>{item.name}</td>\n          <td className='table-container'> {item?.symbol} {formatDate(someMethod1(param1,a)}</td>\n        </tr>\n      ))}\n    </>\n  )\n}\n\n\nconst data = [\n  {\n    name: AA,\n  },\n  {\n    name: BB,\n  },\n  {\n    name: CC,\n    symbol: '\xc2\xa3'\n  }\n]\n\n<table class="greyGridTable">\n  <tbody>\n    <TableItems data={data} />\n  </tbody>\n</table>\n

\n