如何管理两个独立的 React 应用程序之间的主动通信？答案

【问题标题】：How to manage active communication between two independent react apps?如何管理两个独立的 React 应用程序之间的主动通信？
【发布时间】：2021-09-27 16:22:43
【问题描述】：

我有一个需要渲染成两个不同 DOM 根元素的 react 应用程序。我可以根据其中一个内部的更改在它们之间共享数据的最佳方式是什么？似乎我无法在上下文提供程序中包装两个应用程序或使用状态/效果/回调方式在它们之间进行通信。

ReactDOM.render(
      <ReactApp1 componentData={}/>
      , rootElement1
); 
ReactDOM.render(
      <ReactApp2 componentData={}/>
      , rootElement2 
);

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

如果您拆分的唯一原因是因为您需要将内容放入两个不相关的 dom 节点中，您可以通过 portal 而不是两次调用 ReactDOM.render 来实现这一点。这样，您可以使用标准道具和/或上下文在组件之间传递内容。

ReactDOM.render(
  <App />
  rootElement1
)

const App = () => {
  const rootElement2 = /* some code to select rootElement2 from the page. eg, document.getElementById('someId') */

  return (
    <>
      <ReactApp1 componentData={/*...*/}/>
      {React.createPortal(<ReactApp2 componentData={/*...*/} />, rootElement2)}
    </>

  )
}

如果这是不可能的，并且您需要对 ReactDOM.render 进行完全独立的调用，那么您很可能需要创建一些 pub/sub 代码并让应用程序相互发送消息。如果你有一个最喜欢的事件发射器库，你可以使用它，或者如果你想创建自己的，它可能看起来像这样：

// These lines will probably be in their own file
const subscriptions = [];
export const subscribe = (callback) => {
  subscriptions.push(callback);
  const unsubscribe = () => {
    const i = subscriptions.findIndex(callback);
    subscriptions.splice(i, 1);
  }
  return unsubscribe
}
export const publish = (data) => {
  [...subscriptions].forEach(callback => callback(data));
}

// Used like:

const ReactApp1 = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // Listen to messages
    const unsubscribe = subscribe((data) => {
      setCount(data);
    });
    return unsubscribe;
  }, []);

  return <div onClick={() => {
    publish(count + 1);
  }}/>
}

【讨论】：

谢谢@nicholas-tower。门户网站似乎是要走的路。会试一试。