Javascript 如何将ReactDOM.render与其他ReactDOM.render通信

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

ReactDOM.render（，document.getElementById（'element1'））
ReactDOM.render（，document.getElementById（'element2'）

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

我该怎么做

---

我当前正在使用全局变量

窗口

，但更改后，它不会刷新第二个ReactDOM.render中的数据。

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

//应用程序#1
常量事件=新事件（“开始”）；
//发送事件。
要素调度事件（事件）；
//应用程序#2收听事件。
componentDidMount（）{
elem.addEventListener（'start'，this.start}，false）；
}
开始=（e）=>{
// ....
}
组件将卸载（）{
元素removeEventListener（“开始”）；
}

为了让两个React组件单独通过React进行有效通信，它们应该通过公共父级进行通信

对于两个不相关的小部件，它们可以呈现为具有公共父级的门户，如中所示：

Foo小部件
酒吧小部件

---

类应用程序扩展组件{
render（）{
状态={
福：‘福’，
setFoo（foo）{
this.setState（state=>（{…state，foo}））；
}
};
返回
{ReactDOM.createPortal（，document.getElementById（'FooWidget'））}
{ReactDOM.createPortal（，document.getElementById（'BarWidget'））}
;
}
}
const FooWidget=props=>
{（{foo}）=>foo}
;
...
ReactDOM.render（，document.getElementById（'App'））；

组件可以使用

setFoo

setter通过

foo

context属性进行通信

---

另一种可以使用ReactDOM.render的方法是使用Redux并将两个不相关的组件连接到同一个存储。它们可以通过公共存储进行通信。

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

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