Question

想象一下，您构建了上下文A以及React组件1和1.1，其中后者是前者的子代。一切正常。

现在，您构建上下文B，并希望将其与组件1.1一起使用。鉴于您可能在组件1.1中访问了上下文A（即，利用上下文的功能来避免进行钻探），是否可以通过某种方式修改某些内容，以使该组件可以与上下文A和上下文B一起使用？ >

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

Answer 1

像这样吗？

@Order(1)

Answer 2

至少对于较新版本的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 />
);

在React组件中交换React上下文

2 个答案: