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>

这样可以正常工作但我发现对于我想要传递上下文的每个组件重复<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组件包装在其中。然后你不需要它在任何其他地方。

许多组件

1 个答案: