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 (
      

        祖父
        
      
    )
  }
}

import React, { Component } from 'react'
import Child from '../Demo/Child';
export default class Father extends Component {
  render() {
    return (
      

        父亲
        
      
    )
  }
}

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 (
      

        儿子
        
{toMyChild}
      
    )
  }
}