2

我正在将 React 添加到现有的 web 应用程序中。现在，我选择性地替换页面的某些部分，在不同的 div 中呈现不同的组件。出于这个原因，我没有一棵挂在所有组件上的树。我想使用一个上下文提供程序在所有这些组件之间共享上下文信息，但由于我没有一棵树，我不能让它们都挂在同一个上下文提供程序上。

有没有办法使用这样定义的默认上下文？

const MyContext = React.createContext(some_data);

并且没有提供者挂起哪些组件，而只有消费者？

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

它适用于默认值，但是我不知道如何更改此默认上下文的值。

我的理解是否正确，这适用于所有从供应商处挂靠的消费者？或者有没有办法以编程方式设置默认上下文的值？还有另一种方法可以解决这个问题吗？

4

2 回答 2

4

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'));
于 2018-09-19T14:20:33.237 回答
2

您可能想要查看门户。这让你可以定位特定元素来渲染你的 React 树。您可以拥有一个单独的组件树，在您的示例中声明上下文，并将所有组件挂起，而与它如何呈现到 DOM 无关。

这篇文章，在“遗留应用程序”下，让您对如何做我正在谈论的事情有了一个很好的了解。

于 2018-09-19T13:55:52.433 回答