set react context provider state programatically from outside the tree

Question

I\'m adding React to an existing webapp. For now, I\'m selectively replacing parts of the page, rendering different components in different divs. For this reason I don\'t ha

Answer 1

You may want to look into portals. This lets you target specific elements to render your React tree into. You can have a single component tree, with a declared context in your example, and hang all your components off of that independent of how it's being rendered into the DOM.

This article, under "legacy applications" gives you a good idea of how to do what I'm talking about.

Answer 2

React context totally relies on component hierarchy, it cannot be used to provide common context for unrelated React widgets.

If the page consists of multiple React widgets, they need to have a common parent. This can be done with portals, this way the whole page doesn't need to be converted to React component.

Here's an example:

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