react Context的基本使用( react跨组件传递数据 )

目录

一 Context介绍

二 代码

---

一 Context介绍

Context用途: 跨组件传递数据(比如:主题 语言) → 离得比较远的组件之间的通信
Context提供了两个组件:Provider组件 和 Consumer组件
Provider组件:提供数据的
Consumer组件:消费数据的

使用步骤:
1 调用React.createContext() 创建 Provider(提供数据)和Consumer(消费数据)两个组件
2 使用Provider组件作为父节点
3 设置value属性,表示要传递的数据
4 使用Consumer组件接收数据

备注: value的值会传递给回调函数作为参数

二 代码

App -- Node -- SubNode -- Child ,现在 App 和 Child  两个组件要进行通信

import React from "react";
import ReactDOM from "react-dom";


//1 调用React.createContext() 创建 Provider(提供数据)和Consumer(消费数据)两个组件
const {Provider, Consumer} = React.createContext()

class App extends React.Component {

    render() {
        return (
            // 2 使用Provider组件作为父节点
            // 3 设置value属性,表示要传递的数据
            <Provider value='blue'>
                <Node/>
            </Provider>
        )
    }
}

class Node extends React.Component {
    render() {
        return (<SubNode></SubNode>)
    }
}

class SubNode extends React.Component {

    render() {
        return (<Child/>)
    }
}

class Child extends React.Component {

    render() {
        return (
            // 4 使用Consumer组件接收数据
            <Consumer>
                {/*<Provider>的value的值会作为回调函数的参数(data)传过来*/}
                {
                    data=><div>我是{data}的</div>
                }
            </Consumer>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById("root"));

效果