React.js渲染组件两个不同的元素

Question

我正在将应用程序转换为React。 在这种情况下，我需要能够将组件渲染为我正在完成的dom上的两个不同元素：

ReactDOM.render(
  <Provider store={store}>
    <Results />
  </Provider>
  , document.getElementById('root'));

  ReactDOM.render(
    <Provider store={store}>
      <Search />
    </Provider>
    , document.getElementById('root-search'));

现在，我的问题是尝试在组件之间共享状态，我不确定为什么将Provider存储传递给这两个组件时，它为什么不起作用。 更新一个而不影响另一个。

Answer 1

除非有正当理由要开设多家商店，否则建议仅使用一家。

您可以通过拥有一个提供程序来与组件实现共享状态：

ReactDOM.render(
  <Provider store={store}>
    <div>
      <Results />
      <Search />
    </div>
  </Provider> ,
  document.getElementById('root'));