[英]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')
問題是將變量/屬性/狀態從一個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 Picking組件這樣的全局存儲,因為這種解決方案很難維護。
為了使兩個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
上下文屬性進行setFoo
。
可以使用ReactDOM.render
的替代方法是使用Redux並將兩個不相關的組件連接到同一存儲。 他們可以通過公用存儲進行通信。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.