Provider 组件

Provider 组件在外层定义,核心结构如下:

1<Router>
2  {' '}
3  {/* 路由的 Context Provider */}
4  <ProviderA>
5    <ProviderB>
6      {/* 其他自定义 Provider 组件 - 开始标签 */}
7      <Routes />
8      {/* 其他自定义 Provider 组件 - 结束标签 */}
9    </ProviderB>
10  </ProviderA>
11</Router>

因为定义在外层,所以 Provider 组件的用处有:

  • 提供全局共享的上下文(Context),需要渲染 props.children
  • 提供全局内容展示,需要渲染 props.children
  • 拦截作用,根据条件渲染 props.children