React中context的使用方法

React中context的使用方法

App.js文件

// 引入React
import React, {Component} from 'react';
// 引入样式
import './App.css';

/*
* 详细说明：定义了三个组件：分别为App/AppChild/AppChildChild
* 组件关系：App -> AppChild 父子； App -> AppChildChild 祖；AppChild -> AppChildChild 父子；
* 通过下面案例你将领略context的使用方法
* 使用方法总结：
* 1.先创建一个Context容器对象，可以进行结构Provider及Consumer方便之后的简单应用。
* 2.包裹要用的组件，给谁用就在谁的外面包裹，使用属性关键字value进行传值，value不可改变。
* 3.在哪里使用就在哪里声明，static contextType = 容器对象名字;
* 4.使用this.content获取
* 注意上述方法只限于类式组件，如果你使用的是函数式组件，那么你应该用下面的方式去做
* <Consumer>
*   {
*        value => {
*
*        }
*    }
* </Consumer>
***/

// 创建一个Context容器对象，注意开头大写
const MyContext = React.createContext()
// 拿出Provider及Consumer
const {Provider, Consumer} = MyContext;

// 定义一个祖组件
class App extends Component {
    state = {
        username: 'Tom',
        age: 20
    }
    render() {
        const {username, age} = this.state;
        return (
            <div className="App">
                <h3>我是App组件</h3>
                <h4>我的名字：{username}</h4>
                {/*利用props给子组件AppChild传值*/}
                {/*给谁用就用Provider包裹*/}
                {/*<Provider value={username}>
                    <AppChild username={username}/>
                </Provider>*/}
                <Provider value={{username, age}}>
                    <AppChild username={username}/>
                </Provider>
            </div>
        );
    }
}

// 父级组件
class AppChild extends Component {
    render() {
        const {username} = this.props;
        return (
            <div className="AppChild">
                <h3>我是AppChild组件</h3>
                <h4>我接收来自App组件的名字是：{username}</h4>
                <AppChildChild/>
            </div>
        );
    }
}

// 子组件-类式生命
/*class AppChildChild extends Component {
    // 声明context
    static contextType = MyContext;
    render() {
        const {username, age} = this.context;
        return (
            <div className="AppChildChild">
                <h3>我是AppChildChild组件</h3>
                <h4>我接收来自App组件的名字是：{username},年龄：{age}</h4>
            </div>
        );
    }
}*/
// 子组件-函数式声明
function AppChildChild() {
    return (
        <div className="AppChildChild">
            <h3>我是AppChildChild组件</h3>
            <h4>
                <Consumer>
                    {
                        value => {
                            return `我接收来自App组件的名字是：${value.username},年龄：${value.age}`
                        }
                    }
                </Consumer>
            </h4>
        </div>
    )
}

export default App;

App.css文件

.App {
  background-color: blue;
  font-size: 20px;
  padding: 10px;
  color: #ffffff;
}
.AppChild {
  background-color: orange;
  font-size: 20px;
  padding: 10px;
  color: #ffffff;
}
.AppChildChild {
  background-color: red;
  font-size: 20px;
  padding: 10px;
  color: #ffffff;
}