使用react context的作用React.createContext

前言：在實際開發項目的時候我們可能會經常碰到多層組件傳值的情況，就是父組件的值傳遞給子組件。子組件再傳遞給下面的子組件，再傳遞給下面的子組件.......可能會遇到這個情況。

然而這個值，可能會只在最后的子組件使用到，那么這個時候使用createContext簡直就是無敵的存在。

超級簡單又方便，因為最進重構一個項目遇到了多級地獄般的this.props傳值，搞得頭疼。所以推薦多級使用context。

 

 

 

 使用方式，需要在父組件上面創建一個context，或者建立一個文件用來管理context。

//createContext.jsx 文件

export const ButtonContext = React.createContext(‘這里是默認值懂嗎');

//父組件使用

父組件通過Provider包裹子組件，通過value={ }攜帶參數。這個Provider可以理解為生產者。

import { ButtonContext } from './createContext';    //引入

import React, { Component } from 'react';

class Father extends Component {
state:{

choseType:'我是要傳的值'

}

  render() {
    return (
      <div>

　　　　<ButtonContext.Provider value={this.state.choseType}>
 　　　　 {this.props.children}
　　　　</ButtonContext.Provider>

      </div>
    );
  }
}

export default Father;

 

//children.jsx       //他的子組件或者是子子子子子....組件（只要是在父組件下面的組件就可以）子組件使用Consumer包裹，打印出來的value就是接收到的參數。

import { ButtonContext } from './createContext';    //引入


import React, { Component } from 'react';

class Children extends Component {


  render() {
    return (
      <div>

 　　 <ButtonContext.Consumer>
 　　　　 {value=>console.log("context",value)}       //這里打印下看這個value，記得使用時候要return
　　　　</ButtonContext.Consumer>

</div>  );
 } }
 export default Children;