目錄

一 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"));

效果

?