单个<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作为支柱传递给容器组件本身.

预期的用例Provider是包装最根组件.然后所有的孩子和孙子将隐含地收到商店.你应该只做一次,并在里面放一个React元素.你的第二个例子不工作,因为你把它里面三个要素:Topbar,div和Timeline.换上外包div,它会起作用.更好的是,移动Provider到您调用的地方ReactDOM.render()并将最根本的App组件包装在其中.然后你不需要它在任何其他地方.