Angular 5中如何将自定义Options组件传入复用Table组件进行渲染？

这种场景在组件复用的场景里太常见了——你想要的就是把组件作为「动态内容」注入到Table组件的指定位置，而且能根据不同表格的需求灵活切换，完全不需要给所有表格都套相同的Options组件。下面给你两种最常用的实现思路：

1. 传递「渲染函数」（最灵活的方式） #

这种方式适合需要针对表格每行数据定制Options的场景（比如删除/编辑需要知道当前行的ID或数据）：

在你的视图组件里： #

import Table from './Table';
import Options from './Options';

function YourTargetView() {
  // 定义一个渲染Options的函数，接收当前行数据作为参数
  const renderRowOptions = (rowData) => {
    return (
      <Options
        rowId={rowData.id}
        onEdit={() => console.log(`编辑行：${rowData.id}`)}
        onDelete={() => console.log(`删除行：${rowData.id}`)}
      />
    );
  };

  return (
    <div className="view-container">
      {/* 把这个渲染函数传给Table组件 */}
      <Table renderActions={renderRowOptions} tableData={yourDataSource} />
    </div>
  );
}

在你的Table组件里： #

function Table({ renderActions, tableData }) {
  return (
    <table>
      <thead>
        <tr>
          {/* 你的表头列 */}
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map(row => (
          <tr key={row.id}>
            <td>{row.name}</td>
            {/* 在指定的操作列，调用传入的渲染函数，传入当前行数据 */}
            <td>{renderActions?.(row)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

这种方式的好处是：

• 完全灵活：如果某个表格不需要操作按钮，不传renderActions就行，Table里可以通过renderActions?.(row)的可选链语法避免报错；
• 定制性强：不同的视图可以传递不同的渲染函数，比如有的表格需要「详情」按钮，就传一个渲染其他组件的函数就行。

2. 直接传递组件（适合无行数据依赖的场景） #

如果你的Options组件不需要依赖表格行的数据，也可以直接把组件作为props传递：

视图组件里： #

<Table 
  actionsComponent={<Options onEdit={handleEdit} onDelete={handleDelete} />}
  tableData={yourDataSource}
/>

Table组件里： #

function Table({ actionsComponent, tableData }) {
  return (
    <table>
      {/* ... 其他内容 ... */}
      <tbody>
        {tableData.map(row => (
          <tr key={row.id}>
            {/* ... 其他列 ... */}
            <td>{actionsComponent}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

总结 #

不管用哪种方式，核心都是把组件作为props注入到Table中，这是前端框架中实现组件复用和动态内容定制的标准做法，完全能满足你“不是所有表格都需要相同选项”的需求。

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