如何将 ReactDOM.render 与其他 ReactDOM.render 通信答案

【问题标题】：How to communicate ReactDOM.render with other ReactDOM.render如何将 ReactDOM.render 与其他 ReactDOM.render 通信
【发布时间】：2018-10-05 07:48:18
【问题描述】：

我有一个包含 React 应用程序和其他 HTML 元素的项目。意思是：

ReactDOM.render(<Element1/>, document.getElementById('element1') <some section with HTML /> ReactDOM.render(<Element2/>, document.getElementById('element2')

问题是将变量/props/state 从一个 ReactDOM.render 传递到另一个。

我该怎么做？

我目前使用的是全局变量window，但是修改后并没有刷新第二个ReactDOM.render中的数据。

【问题讨论】：

你有 XY 问题。如果这是两个不相关的小部件，则不必使用 ReactDOM.render 渲染它们。它们可能是门户。

标签： javascript reactjs react-dom

【解决方案1】：

为了让两个 React 组件仅通过 React 有效地进行通信，它们应该通过共同的父级进行通信。

如果有两个不相关的小部件，它们可以呈现为具有共同父级的门户，如this answer 中所建议的那样：

<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() {
    state = {
      foo: 'foo',
      setFoo(foo) {
        this.setState(state => ({...state, foo}));
      }
    };

    return <FoobarContext.Provider value={this.state}>    
      {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'));

组件可以使用setFoo setter 通过foo 上下文属性进行通信。

可以使用ReactDOM.render 的替代方法是使用 Redux 并将两个不相关的组件连接到同一个 store。他们可以通过普通商店进行交流。

【讨论】：

【解决方案2】：

您将有多种选择，例如订阅应用程序之间的事件：

// App #1
const event = new Event('start');
// Dispatch the event.
elem.dispatchEvent(event);


// App #2 Listen for the event.
componentDidMount() {
  elem.addEventListener('start', this.start }, false);
}

start = (e) => {
  // ....
}

componentWillUnmount() {
  elem.removeEventListener('start');
}

无论如何，关键是你应该使用像 Redux 这样的全局存储来从两个应用程序中挑选你需要的组件，因为这种解决方案很难维护。

【讨论】：