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 <div>
//             <h3>这是父组件</h3>
//             <Com2 color={this.state.color}>Com2</Com2>
//         </div>
//     }

// }



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



//     render() {

//         return <div>
//             <h2>这是子组件</h2>
//             <Com3 color={this.props.color}></Com3>
//         </div>
//     }

// }


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



//     render() {

//         return <div>
//             <h1 style={{ color: this.props.color }}>这是孙子组件</h1>
//         </div>
//     }

// }






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 <div>
            <h3>这是父组件</h3>
            <Com2>Com2</Com2>
        </div>
    }

}



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



    render() {

        return <div>
            <h2>这是子组件</h2>
            <Com3></Com3>
        </div>
    }

}


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

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

    render() {

        return <div>
            <h1 style={{ color: this.context.color }}>这是孙子组件-----{this.context.color}</h1>
        </div>
    }

}