Context的使用

Context 提供了一個無需為每層元件手動新增 props，就能在元件樹間進行資料傳遞的方法。

props單向資料流動：

https://image-static.segmentfault.com/134/351/1343511491-5c219fdde2a7b_articlex

如果覺得Props傳遞資料很繁瑣，可以採用context,進行跨元件傳遞資料
https://image-static.segmentfault.com/137/153/1371537545-5c21a54e769ca_articlex

例如給子代元素傳遞一筆錢（手動新增狗頭）

為了後續使用方便，封裝一個元件

import {createContext} from 'react';
let moneyContext = createContext()
export default {
   moneyContext
}

App.js

import React,{Component} from 'react';
import ContextParent from "./ContextParent"
import moneyContext from "./moneyContext"
class App extends Component{
  state = {
    money:100
  }
  render(){
    return (
         //提供者的value屬性可以給所有的後代元素提供資料
      <moneyContext.Provider value={{
        money:this.state.money
      }}>
        <ContextParent/>
      </moneyContext.Provider>
    )
  }
}

export default App;

 

ContextParent

import React, { Component,createContext } from 'react'
import GrandChild from "./GrandChild"
import moneyContext from "./moneyContext"
export default class ContextParent extends Component {
    render() {
        return (
               //通過公共例項的Context的Consumer，內部子元素寫成一個函式，引數就可以獲取value值了
                <moneyContext.Consumer>
                    {
                        (value)=>{
                            return (
                                <div>
                                    ContextParent元件獲取App傳遞來的money === {value.money}
                                    <GrandChild />
                                </div>
                            )
                        }
                    }
                </moneyContext.Consumer>
        )
    }
}

 

GrandChlid

import React, { Component } from 'react'
import moneyContext from "./moneyContext"
export default class GrandChild extends Component {
    render() {
        return (
            <moneyContext.Consumer>
                {
                    value=>{
                        return (
                            <div>
                                我是GrandChild元件---{value.money}
                            </div>
                        )
                    }
                }
            </moneyContext.Consumer>
        )
    }
}