断开连接的组件之间共享数据

问题描述 投票:1回答:1

我不是从头开始创建一个react应用,而是在现有的网页上添加交互式组件。我正在安装两个组件,像这样彼此断开。

ReactDOM.render(<Component1 />, document.getElementById('comp1-root'));

ReactDOM.render(<Component2 />, document.getElementById('comp2-root'));

它们在页面上彼此相隔很远。

我怎样才能让它们互相交流状态?

谢谢你。

reactjs react-redux
1个回答
0
投票

对于React,你有两个选择。

  1. Move Component 1Component 2 和它们的状态到一个父组件中,并将父组件的更新状态函数传递给它们。
ComponentWrapper {
...
const updateState = () => {
    //update state
}

return (
    <Component 1 updateParentState={updateState}/>
    <Component 2 updateParentState={updateState}/>
)
...
}
  1. 你不能在没有使用外部状态管理解决方案的情况下更新一个不是父组件或子组件的状态,如 重编 或新的 使用语境 apihook。这些库涉及到将所有单个组件的状态移动到一个更大的集中式全局状态,该状态可以被所有组件更新和访问。

0
投票

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 drillinglifting state up.

© www.soinside.com 2019 - 2024. All rights reserved.