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>
    )
  }
}