我不是从头开始创建一个react应用,而是在现有的网页上添加交互式组件。我正在安装两个组件,像这样彼此断开。
ReactDOM.render(<Component1 />, document.getElementById('comp1-root'));
ReactDOM.render(<Component2 />, document.getElementById('comp2-root'));
它们在页面上彼此相隔很远。
我怎样才能让它们互相交流状态?
谢谢你。
对于React,你有两个选择。
Component 1
和 Component 2
和它们的状态到一个父组件中,并将父组件的更新状态函数传递给它们。ComponentWrapper {
...
const updateState = () => {
//update state
}
return (
<Component 1 updateParentState={updateState}/>
<Component 2 updateParentState={updateState}/>
)
...
}
React门户 是我正在寻找的东西。
根据我的问题,我希望所有安装在不同位置(dom节点)的组件都有相同的上下文。
Portals正好解决了这个问题。现在,我可以用一个上下文组件来容纳该页面上存在的所有组件。就像这样。
const dashboardContextDom = document.getElementById('dashboard-root');
const comp1DOM = document.getElementById('comp1-root');
const comp2DOM = document.getElementById('comp2-root');
const Dashboard = () => {
return (
<>
{ReactDOM.createPortal(<Component1 />, comp1DOM)}
{ReactDOM.createPortal(<Component2 />, comp2DOM)}
</>
);
}
if(dashboardContextDom) {
ReactDOM.render(<Dashboard />, dashboardContextDom);
}
这些组件被安置在一个上下文中,可以很容易地通过以下方式将状态从一个组件传递到另一个组件上 prop drilling
和 lifting state up
.