141、React.js 父组件向子组件共享数据

import React from 'react'
import ReactTypes from 'prop-types'

// 最外层的父组件
// export default class Com1 extends React.Component {

//     constructor(props) {
//         super(props)

//         this.state = {
//             color: 'red'
//         }

//     }

//     render() {

//         return 

//             
这是父组件
//             Com2
//         
//     }

// }



// // 中间的子组件
// class Com2 extends React.Component {



//     render() {

//         return 

//             
这是子组件
//             
//         
//     }

// }


// // 中间的子组件
// class Com3 extends React.Component {



//     render() {

//         return 

//             
这是孙子组件
//         
//     }

// }






export default class Com1 extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            color: 'red'
        }

    }


    // 1、在父组件中，定义一个function ,这个function有个固定的名称，叫做getChildContext,内部必须返回一个对象
    // 这个对象，就是要共享给所有子孙组件的数据类型，
    getChildContext() {

        return {
            color: this.state.color
        }

    }

    //2、使用属性校验，规定一下传递给子组件的数据类型，需要定义一个静态的(static)
    // getChildContextTypes 固定名称，不要改
    static childContextTypes = {
        color: ReactTypes.string //规定了 传递给子组件的数据类型



    }



    render() {
        return 

            
这是父组件
            Com2
        
    }

}



// 中间的子组件
class Com2 extends React.Component {



    render() {

        return 

            
这是子组件
            
        
    }

}


// 中间的子组件
class Com3 extends React.Component {

    //3、上来之后，先来个属性校验，去校验一下父组件传递过来的参数类型
    static contextTypes = {
        color: ReactTypes.string  //这里如果子组件，想要使用父组件，通过context共享的数据，那么在使用
        //之前，一定要先做一下数据类型校验
    }

    render() {

        return 

            
这是孙子组件-----{this.context.color}
        
    }

}