Обмен контекстов React в и из компонентов React

Question

Представьте, что вы создаете контекст A и реагируете на компоненты 1 и 1.1, где последний компонент является дочерним по отношению к первому. Все работает отлично.

Теперь вы создаете Контекст B и хотите использовать с ним Компонент 1.1. Учитывая, что в Компоненте 1.1 вы, вероятно, обращались к Контексту А (т. Е. Использовали возможности контекстов, чтобы избежать подробного изучения), существует ли способ каким-либо образом изменить вещи так, чтобы компонент работал как с Контекстом А, так и Контекстом В?

Я думаю / надеюсь, что есть какой-то способ динамически указать, какой контекст использовать, а не жестко его кодировать.

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 />
);

Answer 2

Как то так?

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

// ...

render() {
  let Context = ContextA;
  if (condition) {
    Context = ContextB;
  }

  return (
    <Context.Consumer>
      {value => <div>Got {value}</div>}
    </Context.Consumer>
  );
}