许多组件的单个 <Provider>

Question

我的根组件中有以下结构

<div className={styles.main_container}>
  <Provider store={store}>
    <Topbar></Topbar>
  </Provider>
  <div className={styles.scene_and_tools}>
    <Provider store={store}>
      <Sidebar></Sidebar>
    </Provider>
    <Provider store={store}>
      <Scene></Scene>
    </Provider>
  </div>
  <Provider store={store}>
    <Timeline></Timeline>
  </Provider>
</div>

这很好用，但我发现它有点不 "DRY" 为我想传递上下文的每个组件重复 <Provider>。所以我尝试了

<div className={styles.main_container}>
  <Provider store={store}>
    <Topbar></Topbar>
  <div className={styles.scene_and_tools}>
      <Sidebar></Sidebar>
      <Scene></Scene>
  </div>
    <Timeline></Timeline>
  </Provider>
</div>

但我收到以下错误：

Failed propType: Invalid prop `children` supplied to `Provider`,
expected a single ReactElement. Check the render method of `App`.

有没有办法让我的代码更干，或者我不得不忍受这种冗余？

Answer 1

第一个变体完全多余。 Provider 首先存在的唯一原因是您可以避免显式地传递商店。否则你也可以删除它并将 store 作为 prop 传递给容器组件本身。

Provider 的预期用例是包装最根组件。然后，所有子孙都将隐含地接收商店。你应该只做一次，并在里面放一个 React 元素。您的第二个示例不起作用，因为您在其中放置了三个元素：Topbar、div 和 Timeline。将外部 div 包裹起来，它就可以工作了。更好的是，将 Provider 移动到调用 ReactDOM.render() 的位置，并将最根部的 App 组件包装在其中。那么你在其他任何地方都不需要它。

许多组件的单个 <Provider>

Single <Provider> for many components

javascript

reactjs

redux