使用react context的作用React.createContext

春冰 · 发表于 2020-5-14 14:13:00

前言：在实际开发项目的时候我们可能会经常碰到多层组件传值的情况，就是父组件的值传递给子组件。子组件再传递给下面的子组件，再传递给下面的子组件.......可能会遇到这个情况。

然而这个值，可能会只在最后的子组件使用到，那么这个时候使用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;