React Hooks中复用Chart/Cell组件切换useContext的最优方案咨询

你的那个三元判断写法确实可行，但正如你觉得的那样不够优雅——而且如果后续需要新增更多上下文类型，硬编码的条件判断会让组件逻辑越来越臃肿，维护成本很高。复制组件的方案更是不可取，完全违背了代码复用的初衷。下面是几种更合理的实现方式：

方案一：通过Props注入上下文（最推荐） #

核心思路是让Chart和Cell组件不直接绑定固定的上下文，而是通过props接收外部传入的上下文对象，这样组件就变成了通用的“容器”，可以适配任何符合格式的上下文。

1. 改造Chart组件 #

// 接受一个context prop，默认设为原上下文保持兼容性
function Chart({ context: ChartContext = OriginalContext }) {
  const [selectedCombos, handleSelectedDispatch] = useContext(ChartContext);
  
  // 原Chart组件的逻辑保持不变...
  
  // 将上下文传递给子组件Cell
  return <Cell context={ChartContext} />;
}

2. 改造Cell组件 #

function Cell({ context: CellContext }) {
  const [data, dispatch] = useContext(CellContext);
  
  // 原Cell组件的逻辑保持不变...
}

3. 使用方式 #

// 使用原上下文的图表
<Chart />
// 或显式指定：<Chart context={OriginalContext} />

// 使用新上下文的图表
<Chart context={OtherContext} />

这种方式的优势在于：

• 组件完全解耦于具体上下文，复用性极强
• 新增上下文时不需要修改组件内部代码，符合开闭原则
• 代码清晰，一眼就能看出当前图表使用的是哪个上下文

方案二：封装自定义Hook统一处理上下文 #

如果觉得每个组件都传context prop有点繁琐，可以封装一个自定义Hook，专门负责根据传入的上下文获取数据：

// 自定义Hook
function useChartContext(context) {
  // 可以在这里统一做上下文校验，避免传入错误的上下文
  if (!context) {
    throw new Error('Chart context is required');
  }
  return useContext(context);
}

// 改造Chart组件
function Chart({ context = OriginalContext }) {
  const [selectedCombos, handleSelectedDispatch] = useChartContext(context);
  // ...原逻辑
  return <Cell context={context} />;
}

// 改造Cell组件
function Cell({ context }) {
  const [data, dispatch] = useChartContext(context);
  // ...原逻辑
}

这个方案在方案一的基础上增加了一层封装，方便统一处理上下文的校验、默认值等逻辑，后续如果需要对上下文的使用做统一修改，只需要改这个Hook即可。

为什么不推荐你的初始写法？ #

你的三元判断写法const [selectedCombos, handleSelectedDispatch] = usePlayers ? useContext(OriginalContext) : useContext(OtherContext)虽然能跑，但有几个明显问题：

• 硬编码了两个上下文的判断，新增第三个上下文时必须修改组件内部代码
• 组件和具体上下文绑定，无法作为通用组件复用
• 如果usePlayers这个标记的逻辑变复杂，组件内部的条件判断会越来越乱

综上，最推荐的是方案一的Props注入方式，既保持了代码的复用性，又具备良好的扩展性和可读性。

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