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

【问题标题】：wrap multiple react DOM component in redux's Provider在 redux 的 Provider 中包装多个 react DOM 组件
【发布时间】：2018-11-30 11:58:20
【问题描述】：

我在我的 ReactJS 项目中的 index.js 文件中有此代码，我希望 redux 的 <Provider> 标记将它们包装起来，以便它们都可以访问同一个商店，
问题是，我该如何这样做？

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

【问题讨论】：

标签： javascript reactjs redux react-dom

【解决方案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'));

【讨论】：

【解决方案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 一起使用。

【讨论】：

不应该有return 声明吗？因为我在提供者标签所在的行中有一个错误提示 Expected an assignment or function call and instead saw an expression。
请注意有=> (...) 括号，而不是=> {...} 括号。括号需要return。括号使用隐式返回。

【解决方案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>

【讨论】：