如何实现可复用HTML表格？解决不同onClick参数传递问题

我需要复用同一个表格组件，两个场景下点击按钮的回调需要传递不同参数——一个传user.id执行删除操作，另一个传整个user对象执行添加操作，怎么实现组件复用？

以下是两种实用的解决思路：

方案1：父组件封装回调，自主决定传递参数 #

这种方式无需修改表格组件本身，让父组件在传递onClickHandler时，提前封装好要传递的参数。表格组件只负责触发回调，不用关心具体传什么内容。

父组件调用示例 #

添加用户场景：

{usersData &&
  <Table
    data={usersData}
    onClickHandler={(user) => addUserHandler(user)} // 传递完整user对象
    buttonText="Add"
  />
}

删除用户场景：

{usersData &&
  <Table
    data={usersData}
    onClickHandler={(user) => deleteUserHandler(user.id)} // 仅传递user.id
    buttonText="Delete"
  />
}

表格组件无需修改 #

原表格组件的按钮点击逻辑保持不变：

<Button onClick={() => onClickHandler(user)}>
  {buttonText}
</Button>

优点：表格组件逻辑极简，完全由父组件控制回调参数，灵活性拉满，适合参数规则多变的场景。

方案2：给表格组件添加参数提取器Props #

如果希望表格组件承担部分参数处理逻辑，可以新增一个paramExtractor Props，用来指定从user中提取什么值传给回调，默认传递整个user对象。

修改后的表格组件 #

const Table = ({ data, onClickHandler, buttonText, paramExtractor = (user) => user }) => (
  <Container>
    <StyledTable>
      <THead>
        <TR>
          <TH>ID</TH>
          <TH>NAME</TH>
          <TH>PHONE</TH>
        </TR>
      </THead>
      <TBody>
        {data?.map((user) => (
          <TR key={user.id} >
            <TD>{user.id}</TD>
            <TD>{user.name}</TD>
            <TD>{user.phone}</TD>
            <TD>
              <Button
                onClick={() => onClickHandler(paramExtractor(user))} // 使用提取器获取参数
              >
                {buttonText}
              </Button>
            </TD>
          </TR>
        ))}
      </TBody>
    </StyledTable>
  </Container>
)

export default Table;

父组件调用示例 #

添加用户场景（默认传整个user，可省略paramExtractor）：

{usersData &&
  <Table
    data={usersData}
    onClickHandler={addUserHandler}
    buttonText="Add"
  />
}

删除用户场景（指定提取user.id）：

{usersData &&
  <Table
    data={usersData}
    onClickHandler={deleteUserHandler}
    buttonText="Delete"
    paramExtractor={(user) => user.id}
  />
}

优点：父组件代码更简洁，参数提取规则集中在表格组件的Props配置中，适合参数规则相对固定的场景。

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