React属性之context属性

定义：

例子：

import React from 'react'


let MyContext = React.createContext()


class Grand extends React.Component {
   
    static contextType = MyContext
    render() {
   
        const {
    username, age } = this.context
        return (
            <div style={
   {
    padding: "10px", backgroundColor: "pink" }}>
                我是孙子组件，我爷爷的名字是{
   username},他的年龄是{
   age}岁;
        </div>
        )
    }
}

function Child(props) {
   
    return (
        <div style={
   {
    padding: "10px", backgroundColor: "green" }}>
            <MyContext.Consumer>
                {
   value => `我是爸爸组件，我爸爸的名字是${
     value.username},他的年龄是${
     value.age}岁;`}
            </MyContext.Consumer>
            <Grand />
        </div>
    )

}



export default function Key() {
   

    let [username] = React.useState('张三丰');
    let [age] = React.useState('88');

    return (
        <div style={
   {
    padding: "10px", backgroundColor: "red" }}>
            我是爷爷组件，我的姓名是：{
   username},我的年龄是{
   age}岁;
            <MyContext.Provider value={
   {
    username, age }}>
                <Child />
            </MyContext.Provider>

        </div>
    )
}