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'));