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;
}