单个<提供商>用于许多组件

Single <Provider> for many components

本文关键字：许多 组件 用于 提供商 lt 单个 gt      更新时间：2023-09-26

我的根组件中有以下结构

<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`.

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

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

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

相关文章：