reactjs - 在 React 组件中交换 React 上下文

Question

想象一下，您构建了 Context A 和 React 组件 1 和 1.1，其中后一个组件是前者的子组件。一切都很完美。

现在您构建上下文 B 并希望将组件 1.1 与它一起使用。鉴于在组件 1.1 中您可能访问了上下文 A（即利用上下文的强大功能来避免道具钻探），有没有办法以某种方式修改某些内容，以使组件可以同时与上下文 A 和上下文 B 一起使用？

我正在考虑/希望有某种方法可以动态指定要使用的上下文，而不是对其进行硬编码。

标签： reactjsreact-context

Answer 1

至少对于较新版本的 React，您可以使用useContext钩子轻松使用多个上下文。

import { ContextA } from 'wherever/a';
import { ContextB } from 'wherever/b';

const Child = ({condition}) => {
  let valueA = useContext(ContextA);
  let valueB = useContext(ContextB);

  return (
    <div>Got {condition ? valueA : valueB}</div>
  );
}

render(
  <ContextA.Provider value={something}>
    <ContextB.Provider value={something}>
      <Child />
    <ContextB.Provider />
  <ContextA.Provider />
);