从树外以编程方式设置反应上下文提供者状态

Question

我正在将React添加到现有的Webapp中。 现在，我将选择性地替换页面的各个部分，以不同的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中的方式无关。

本文在“旧版应用程序”下为您提供了一个很好的想法，使我可以执行我正在谈论的事情。