同一页面上的多个 React 应用程序实例答案

【问题标题】：Multiple Instances of React Application on the Same Page同一页面上的多个 React 应用程序实例
【发布时间】：2020-01-14 23:20:25
【问题描述】：

您好，我有一个从 Create React App 构建并弹出的 React Redux 应用程序。我想在同一个网页上两次呈现这个应用程序。我们的主网页不使用 React，但这些特定部分会。我已经构建了应用程序，当我只渲染一次时它渲染得很好，但是当我在两个单独的 dom 节点上渲染它两次时，我在第二个应用程序中更改的值会在第一个应用程序中更新。它似乎在两个应用程序之间共享状态。

根据我的研究，这似乎是一个完全可行的目标。我读过这也可能是由 webpack 构建引起的，尽管我想避免在一个页面上包含多个相同的脚本只是为了创建一个独特的构建 (see this link)。我正在寻求帮助来渲染我的应用程序的两个独特实例。下面的代码是我的应用程序的根：

const one = document.querySelector('[data-dfa=local]');
const two = document.querySelector('[data-dfa=local2]');

const store = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store={store}>
    <FieldAppointment appId='one' />
  </Provider>, one);

ReactDOM.render(
  <Provider store={store}>
    <FieldAppointment appId='two' />
  </Provider>, two);

【问题讨论】：

标签： javascript reactjs redux react-redux create-react-app

【解决方案1】：

您在两个实例中使用同一个商店。当一个应用程序中的某些内容更新商店时，它们都会收到该更改。也许将它分成两个独立的商店？：

const store1 = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const store2 = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store={store1}>
    <FieldAppointment appId='one' />
  </Provider>, one);

ReactDOM.render(
  <Provider store={store2}>
    <FieldAppointment appId='two' />
  </Provider>, two);

【讨论】：