如何实现可适配多同API Context的可复用React组件？

核心思路 #

让ActionCell依赖抽象的API接口而非具体的Context实现，通过参数注入的方式让组件可以使用不同的Context Hook——只要这些Hook返回的结构符合统一接口即可。

具体实现方案 #

1. 定义统一接口约束（TypeScript场景推荐） #

先明确所有Context Hook必须遵循的返回值结构，确保API一致性：

type RowActionAPI = {
  edit: boolean;
  handleEdit: () => void;
  handleEditComplete: () => void;
  handleEditCancel: () => void;
  handleDelete: () => void;
};

2. 方案一：直接传入API参数（最直观） #

改造ActionCell，让它接收所需的所有操作作为props，不再直接绑定固定Hook：

export const ActionCell = ({
  edit,
  handleEditComplete,
  handleEditCancel,
  handleEdit,
  handleDelete,
}) => {
  return (
    <StyledActionCell>
      <Group>
        {edit ? (
          <>
            <Complete onClick={handleEditComplete} />
            <Cancel onClick={handleEditCancel} />
          </>
        ) : (
          <>
            <Edit onClick={handleEdit} />
            <Delete onClick={handleDelete} />
          </>
        )}
      </Group>
    </StyledActionCell>
  );
};

使用方式：在不同Context的父组件中，调用对应Hook并传递参数：

// 场景A：使用Context A的Hook
const ContextARow = () => {
  const rowActions = useRowContextA();
  return <ActionCell {...rowActions} />;
};

// 场景B：使用Context B的Hook
const ContextBRow = () => {
  const rowActions = useRowContextB();
  return <ActionCell {...rowActions} />;
};

3. 方案二：注入自定义Hook（更灵活） #

如果希望ActionCell内部自行处理Hook调用，可以让它接受一个Hook作为参数，同时保留原Hook作为默认值以兼容现有代码：

export const ActionCell = ({ useRowHook = useRow }) => {
  const {
    edit,
    handleEditComplete,
    handleEditCancel,
    handleEdit,
    handleDelete,
  } = useRowHook();

  return (
    <StyledActionCell>
      <Group>
        {edit ? (
          <>
            <Complete onClick={handleEditComplete} />
            <Cancel onClick={handleEditCancel} />
          </>
        ) : (
          <>
            <Edit onClick={handleEdit} />
            <Delete onClick={handleDelete} />
          </>
        )}
      </Group>
    </StyledActionCell>
  );
};

使用方式：

// 使用Context A的Hook
<ActionCell useRowHook={useRowContextA} />

// 使用Context B的Hook
<ActionCell useRowHook={useRowContextB} />

4. 方案三：高阶组件封装（适合批量复用） #

如果需要频繁在某个Context下使用ActionCell，可以用高阶组件封装出专属组件：

export const withRowHook = (useRowHook) => {
  return () => {
    const rowActions = useRowHook();
    return <ActionCell {...rowActions} />;
  };
};

// 封装不同Context的专属ActionCell
const ActionCellForContextA = withRowHook(useRowContextA);
const ActionCellForContextB = withRowHook(useRowContextB);

// 使用时直接调用封装后的组件
<ActionCellForContextA />

方案对比 #

• 方案一：无额外封装成本，逻辑直观，适合简单场景；
• 方案二：保留组件内部Hook调用逻辑，灵活性更高，适合需要组件自主管理状态的场景；
• 方案三：减少重复代码，适合批量复用同一Context的场景。

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