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;
  • 相关阅读:
    log4j 配置文件详解
    Java 发送Get和Post请求
    java 基于百度地图API GPS经纬度解析地址
    Spring MVC 注解json 配置
    web.xml中classpath 解释
    【错误信息】springMVC No mapping found for HTTP request with URI
    栈和堆
    结构体和类的区别,联系
    Delegate,Block,Notification, KVC,KVO,Target-Action
    Protocol, Delegate
  • 原文地址:https://www.cnblogs.com/seemoon/p/12888318.html
Copyright © 2011-2022 走看看