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

Question

我有一个 React 应用需要渲染成两个不同的 DOM 根元素。根据其中一个内部的变化，我可以在它们之间共享数据的最佳方式是什么？似乎我无法在上下文提供程序中包装两个应用程序或使用 state/effect/callback 方式在它们之间进行通信。

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

Answer 1

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

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);
  }}/>
}

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

How to manage active communication between two independent react apps?

reactjs

react-context