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

实例

import * as React from 'react';
import { Provider, connect } from 'recompose-context';

interface IAppProps {
  msg?: string;
}

export const DEFAULT_VALUE = `step3 Grandson component React Context - This is the parent component's Props`;

@connect
export class Grandson extends React.Component<IAppProps, {}> {
  static displayName = 'GrandsonComponent';
  public render() {
    return (
      <div className="grandson-component">
        {this.props.msg}
      </div>
    );
  }
}

export class Son extends React.Component<{}, {}> {
  static displayName = 'SonComponent';
  public render() {
    return (
      <div>
        step2 Son component
        <Grandson />
      </div>
    );
  }
}

export default class Parents extends React.Component<IAppProps, {}> {
  static displayName = 'ParentComponent';
  static defaultProps = {
    msg: DEFAULT_VALUE
  };
  public render() {
    return (
      <Provider msg={this.props.msg}>
        <div>
          step1 Parent component
          <Son />
        </div>
      </Provider>
    );
  }
}

渲染后的结果，

step1 Parent component
step2 Son component
step3 Grandson component React Context - This is the parent component's Props

API

connect 装饰器

被 connect 高阶组件装饰的 React.ReactNode，订阅 Context 对象的组件。这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

对于 React SFC 组件可以这么使用，

import * as React from "react";

interface IAppProps {}

const IApp: React.SFC<IAppProps> = props => {
  return <div></div>;
};

export default connect(IApp);

Provider 组件

返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。 Provider 可以定义多个 Props 参数，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。