博客

react 上下文(Context)

  • Post author:
  • Post category:其他


注意： 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。

2.1首先你需要通过在终端npm install prop-types安装一个叫prop-types的第三方包

getChildContext 定义在父组件中，指定子组件可以使用的信息

childContextTypes 定义在父组件中，getChildContext 指定的传递给子组件的属性需要先通过 childContextTypes 来指定，不然会产生错误

子组件需要通过 contextTypes 指定需要访问的元素。 contextTypes 没有定义， context 将是一个空对象。

父组件定义 

class Greeter extends Component{
    constructor(props){
        super(props)
        this.state={
            add:87,
            remove:88
        }
    }
    static childContextTypes = {
        add:T.number,
        remove:T.number
    }
    getChildContext() {
       const { add,remove} = this.state;
       return {
           add,
           remove
       }
    }
    render(){
        return(
            <div>
                <ComponetReflux/>
            </div>
        )
    }
}

子组件定义

class ComponetReflux extends Component{
    constructor(props){
        super(props)
        this.state={
            
        }
    }
    static contextTypes = {
        add:T.number,
        remove:T.number
    }
    render(){
        console.log(this.context)              //打印{add:87,remove:88}
        const {name,age} = this.state
        return (
            <div>测试context</div>
    )
    }
};


版权声明：本文为xuxiaoping1989原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。