установить состояние поставщика контекста реагировать программно вне дерева

Question

Я добавляю React в существующее веб-приложение.Сейчас я выборочно заменяю части страницы, отображая разные компоненты в разных элементах div.По этой причине у меня нет единого дерева, из которого висят все компоненты.Я хотел бы использовать один поставщик контекста для обмена контекстной информацией между всеми этими компонентами, но, поскольку у меня нет единого дерева, я не могу заставить их зависать от одного и того же поставщика контекста.

Есть ли способ использовать контекст по умолчанию, определенный следующим образом?

const MyContext = React.createContext(some_data);

и не иметь провайдера, от которого зависают компоненты, а только потребителей?

<MyContext.Consumer>...</MyContext.Consumer>

Это работает для значения по умолчанию, но тогда я не знаю, как изменить значение этого контекста по умолчанию.

Верно ли мое понимание, и это предназначено для всех потребителей, зависающих от поставщика?или есть способ программно установить значение контекста по умолчанию?Есть ли другой способ это исправить?

Answer 1

Контекст React полностью опирается на иерархию компонентов, его нельзя использовать для предоставления общего контекста для несвязанных виджетов React.

Если страница состоит из нескольких виджетов React, у них должен быть общий родительский элемент.Это можно сделать с помощью порталов, поэтому всю страницу не нужно преобразовывать в компонент React.

Вот пример :

<div id="App"></div>
<h2>Foo widget</h2>
<div id="FooWidget"></div>
<h2>Bar widget</h2>
<div id="BarWidget"></div>

---

class App extends Component {
  render() {
    return <FoobarContext.Provider value={{foo: 'foo', bar: 'bar'}}>    
      {ReactDOM.createPortal(<FooWidget />, document.getElementById('FooWidget'))} 
      {ReactDOM.createPortal(<BarWidget />, document.getElementById('BarWidget'))} 
    </FoobarContext.Provider>;
  }
}

const FooWidget = props => <FoobarContext.Consumer>
  {({ foo }) => foo}
</FoobarContext.Consumer>;

...

ReactDOM.render(<App />, document.getElementById('App'));

Answer 2

Вы можете посмотреть на порталы .Это позволяет вам нацеливать определенные элементы для визуализации вашего дерева React.У вас может быть одно дерево компонентов с объявленным контекстом в вашем примере, и вы можете повесить все ваши компоненты независимо от того, как оно отображается в DOM.

Эта статья , под«Устаревшие приложения» дают вам хорошее представление о том, как делать то, о чем я говорю.