React基础-context与prop-types

context与prop-types用法

prop-types一般限制子组件传进来的props属性的数据类型,限制后对于某些需要固定数据类型的场景可以方便快速检查出错误
context上下文可以把props属性的多级传递或者跨级传递

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Grandson extends Component{
    static contextTypes = {   /* 3- 组件中需要声明static contextTypes定义接收的数据名和数据类型 */
        arr:PropTypes.array
    }
    render(){
        return(
            <div>
                {this.props.title}
                {this.context.arr} {/* 4- 使用this.context取到数据  */}
            </div>
        )
    }
}

class Child extends Component{
    render(){
        return (
            <div>
                <Grandson title={this.props.title}></Grandson>{/* 子组件再把this.props.title传给孙子组件 */}
            </div>
        )
    }
}
export default class apps extends Component {
    static childContextTypes = { /* 1- 使用Context首先需要在父级组件定义static contextTypes上下文数据类型 */
        arr: PropTypes.array
    }
    getChildContext(){ /* 2- 实现一个实例getChildContext方法.返回一个对象,对象中定义数据的参数 */
        return {
            arr:[1,2,3]
        }
    }
    constructor(p){
        super(p)
        this.state = {
            title:'标题'
        }
    }
    render() {
        return (
            <div>
                <Child title={this.state.title}></Child>{/* 把this.state的title传给子组件 */}
            </div>
        )
    }
}