使用react context的作用React.createContext

·  阅读 571

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

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

仅做学习记录使用,版权归原作者:www.cnblogs.com/seemoon/p/1…

分类:
阅读
标签:
分类:
阅读
标签: