從樹外以編程方式設置反應上下文提供者狀態

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中的方式無關。

本文在“舊版應用程序”下為您提供了一個很好的想法，使我可以執行我正在談論的事情。