React 中运用context 实现多层级数据从上往下传递

React 中遇到父孙或者更深级别的组件通信，如果采用父子组件间props的传值方式，代码将会变得非常繁琐且难以维护，

因此可以采用context 来传递数值

import PropTypes from prop-types;
export default class GrandFather extends Component {
  state={
    toMyChild:hahah
  }
  
  static childContextTypes={    // context 内容的格式 传数据
    toMyChild: PropTypes.string,
  }
  getChildContext() {
    const {toMyChild} =this.state;
    return { toMyChild };
  };
  render() {
    return (
      <div>
        祖父
        <Father />
      </div>
    )
  }
}

import React, { Component } from react
import Child from ../Demo/Child;
export default class Father extends Component {
  render() {
    return (
      <div>
        父亲
        <Child />
      </div>
    )
  }
}

import React, { Component } from react
import PropTypes from prop-types;
export default class Child extends Component {
  static contextTypes = {  // context 内容的格式 接收数据
    toMyChild: PropTypes.string,
  };

  render() {
    const {toMyChild} = this.context;
    return (
      <div>
        儿子
        <p>{toMyChild}</p>
      </div>
    )
  }
}