React中Context使用

作者: MJ 分类: react 发布时间: 2019-03-20 17:20

React中Context使用

import React, { Component } from 'react';
let contextBox = React.createContext();
let Child = () =>{
    return (
        <div>
            <Son />
        </div>
    )
}
let Son = () =>{
    return (
        <contextBox.Consumer>
        {
            context => {
                return (
                    <div>{context.name}{context.age}</div>
                )
            }
        }
        </contextBox.Consumer>
       
    )
}
class Context extends Component {
    state = {
        name:"test",
        age:99
    }
    render(){
        return (
            <div>   
                <contextBox.Provider value={{name:this.state.name,age:this.state.age}}>
                    <Child />
                </contextBox.Provider>
            </div>
        )
    }
}
export default Context;

 

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注