React Context 跨组件传递数据

Context 可以实现跨组件传递数据，Context 提供了两个组件：Provider 和 Consumer，Provider 用来提供数据，Consumer 用了 获取数据

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建context得到两个组件
const {
    
    Provider, Consumer} = React.createContext()

class App extends React.Component {
    
    
    render() {
    
    
        return (
            // 2.使用 Provider 组件作为父节点
            // 3.设置value，表示要传递的数据
            <Provider value="pink">
                <div>
                    <Node/>
                </div>
            </Provider>
        )
    }
}

const Child = (props) => {
    
    
    return (
        <div>
             // 4.使用Consumer组件接收数据，内容是一个回调函数
            <Consumer>
                {
    
    
                    data => <h1>传递来的值 -- {
    
    data}</h1>
                }
             </Consumer>
        </div>
    )
}

ReactDOM.render(App, document.getElementById('root'))