zoukankan      html  css  js  c++  java
  • 使用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;
  • 相关阅读:
    获得目标服务器中所有数据库名、表名、列名
    SQL Server 2008 安装SQLDMO.dll
    三层交换原理
    NAT地址转换原理全攻略
    C#中显/隐式实现接口及其访问方法
    As,is含义?using 语句
    c#泛型约束
    C#几个经常犯错误汇总
    C#--深入分析委托与事件
    markdown基础
  • 原文地址:https://www.cnblogs.com/seemoon/p/12888318.html
Copyright © 2011-2022 走看看