如何与其他 ReactDOM.render 交流 ReactDOM.render
How to communicate ReactDOM.render with other ReactDOM.render
我有一个包含 React 应用程序和其他 HTML 元素的项目。
意思是:
ReactDOM.render(<Element1/>, document.getElementById('element1')
<some section with HTML />
ReactDOM.render(<Element2/>, document.getElementById('element2')
问题是将 variable/props/state 从一个 ReactDOM.render 传递给另一个。
我该怎么做?
我目前使用的是全局变量window
,但更改后并没有在第二个ReactDOM.render刷新数据。
您将有多种选择,例如订阅应用程序之间的事件:
// 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 这样的全局存储,从两个应用程序中挑选你需要的组件,因为这种解决方案很难维护。
为了让两个 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() {
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 并将两个不相关的组件连接到同一个商店。他们可以通过公共商店进行交流。
我有一个包含 React 应用程序和其他 HTML 元素的项目。 意思是:
ReactDOM.render(<Element1/>, document.getElementById('element1')
<some section with HTML />
ReactDOM.render(<Element2/>, document.getElementById('element2')
问题是将 variable/props/state 从一个 ReactDOM.render 传递给另一个。
我该怎么做?
我目前使用的是全局变量window
,但更改后并没有在第二个ReactDOM.render刷新数据。
您将有多种选择,例如订阅应用程序之间的事件:
// 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 这样的全局存储,从两个应用程序中挑选你需要的组件,因为这种解决方案很难维护。
为了让两个 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() {
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 并将两个不相关的组件连接到同一个商店。他们可以通过公共商店进行交流。