Question

我在ReactJS项目的index.js文件中有此代码，我希望redux的<Provider>标签将它们包装起来，以便它们都可以访问同一商店。
是，我该怎么办？

ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Footer />, document.getElementById('footer'));

Answer 1

好吧，如果store是相同的，那么您可以简单地将<Provider>应用于所有作品，它们都将使用相同的Redux存储。 Provider不是唯一的，而是唯一的store。像这样：

const store = createStore(...); // or any valid Redux store declaration or import

ReactDOM.render(<Provider store={store}><Header /></Provider>, document.getElementById('header'));
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
ReactDOM.render(<Provider store={store}><Footer /></Provider>, document.getElementById('footer'));

Answer 2

正如另一个答案已经暗示的那样，这可以通过在Redux提供程序中使用相同的商店来实现。由于Redux不依赖于React组件的层次结构，所以连接的组件不一定要有一个公共父代：

ReactDOM.render(
  <Provider store={store}><Header /></Provider>,
  document.getElementById('header')
);
ReactDOM.render(
  <Provider store={store}><App /></Provider>, 
  document.getElementById('root')
);
ReactDOM.render(
  <Provider store={store}><Footer /></Provider>,
  document.getElementById('footer')
);

另一个不特定于Redux的选项，但也可以与具有多个根组件的任何React应用程序一起使用，是对这些组件使用门户，如this answer所示：

const Page = props => (
  <Provider store={store}>    
      {ReactDOM.createPortal(<Header/>, document.getElementById('header'))} 
      {ReactDOM.createPortal(<App/>, document.getElementById('root'))} 
      {ReactDOM.createPortal(<Footer/>, document.getElementById('footer'))}
  </Provider>
);

ReactDOM.render(<Page/>, document.getElementById('page'));

<div id="page"></div>是HTML正文中存在的占位符元素，用于安装应用程序，而不必是标头等元素的父元素。

此选项也可以与React上下文API Provider或页面组件state一起使用。

Answer 3

是否有理由需要定位三个html元素？这里的标准做法是仅定位root并处理React应用程序中的其余内容，如下所示：

在index.js中：

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

在App.js中：

export default = () =>
  <Header />
  <Body />
  <Footer />

您的整个HTML主体将如下所示（Facebook create-react-app的推荐方法）：

<body>
  <noscript>JavaScript must be enabled to run this application.</noscript>
  <div id="root"></div>
</body>

在redux的Provider中包装多个react DOM组件

3 个答案: