Recompose-Context
React Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。
先前 React 使用实验性的 context API 运行,旧的 API 将会在所有 16.x 版本中得到支持,但用到它的应用应该迁移到新版本。过时的 API 将在未来的 React 版本中被移除。
基于 recompose
实现 React Context
API 特性,避免因 React 版本升级导致 React Context API 不兼容的问题。
安装
npm i recompose-context --save-dev
实例
;; interface IAppProps msg?: string; const DEFAULT_VALUE = `step3 Grandson component React Context - This is the parent component's Props`; @connectComponent<IAppProps {}> static displayName = 'GrandsonComponent'; public { return <div className="grandson-component"> thispropsmsg </div> ; } Component<{} {}> static displayName = 'SonComponent'; public { return <div> step2 Son component <Grandson /> </div> ; } Component<IAppProps {}> static displayName = 'ParentComponent'; static defaultProps = msg: DEFAULT_VALUE ; public { return <Provider msg=thispropsmsg> <div> step1 Parent component <Son /> </div> </Provider> ; }
渲染后的结果,
step1 Parent componentstep2 Son componentstep3 Grandson component React Context - This is the parent component's Props
API
connect 装饰器
被 connect
高阶组件装饰的 React.ReactNode
,订阅 Context 对象的组件。这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。
对于 React SFC
组件可以这么使用,
; interface IAppProps {} const IApp: React.SFC<IAppProps> = { return <div></div>;}; IApp;
Provider 组件
返回一个 Provider React 组件,它允许消费组件订阅 context 的变化。 Provider 可以定义多个 Props 参数,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据。