有关React挂钩中useContext的设计问题：相似的组件但具有不同的上下文

Question

我有一个Chart组件，该组件由Cell组件组成。 Chart和Cells都使用useContext钩子，我在外层提供了该上下文。我想创建一个相似但使用不同上下文的新图表。例如，原始图表根据不同的键存储和查找信息：当我填充原始上下文时，它看起来像：{'player 1': [], 'player 2': [], 'player 3' ...}，但是新上下文中的样子是：{'You': [], 'Your opponent': []}

我应该将参数/标志传递给Chart组件，告诉它使用什么上下文？然后，我可以执行以下操作：const [selectedCombos, handleSelectedDispatch] = usePlayers ? useContext(OriginalContext) : useContext(OtherContext)

我还能做类似的事情吗？我知道它闻起来很不好，但是我看到的唯一替代方法是将Chart / Cell组件复制到一个新文件，更改其使用的上下文并重命名。那也很烂。什么是正确的方法？

我尝试将代码简单地复制到新组件并使用其他上下文，但这也很麻烦。

Answer 1

传递标志有点不好，因为如果您将来考虑，Cell可以使用3个不同的上下文会发生什么？或者更多？

三元会不好。然后，您将导入不会使用的上下文。

您可以做的是通过上下文传递道具。

例如

// File that render the cell.
import OnlyTheContextYouNeed from '../mycontext/OnlyTheContextYouNeed'

...
    <Cell usedContext={OnlyTheContextYouNeed } />
...

//Cell.jsx    
...
const [selectedCombos, handleSelectedDispatch] = useContext(props.usedContext) 

通过这种方式，您不必导入Cell中的所有上下文，而仅导入呈现Cell时需要和使用的上下文。