为了账号安全,请及时绑定邮箱和手机立即绑定

React:context上下文

标签:
React.JS

React:context上下文

在react中,我们会遇到这么一个情况,如果爷爷想传东西给孙子,那么就需要这么做:爷爷 传给 父亲,父亲再传给自己的儿子。

如果层级嵌套的特别深,怎么传递呢?这时候就要引出我们今天的知识点context上下文,可以通过设置上下文,让参数容易读取,不需要层层传递。

下面就一个简单的例子来说明:

这是目录结构:

└─component
        App.js
        Children.js
        Grandson.js

App.js:

import React from "react";import Children from "./Children";import PropTypes from "prop-types";//在APP中定义一个状态 color:"red"  希望将这个状态传给children和grandson//上下文 context 在当前组件中获取和设置后代组件中的上下文  //1.在父组件定义上下文  先要标明上下文的类型  一般使用属性校验包来校验规定类型:props-type //2.在父级中获取并设置后代的上下文  是一个固定的方法 export default class App extends React.Component{
  //静态属性  这个结构是固定
   static childContextTypes={        color:PropTypes.string
    }
    getChildContext(){     //这里返回什么  上下文的内容就是什么
      return {                color:this.state.color
      }
    }    constructor(props){        super(props);        this.state={            color:"red"
  }
    }

    render(){        return (            <div>
                <h1>APP</h1>
                <Children color={this.state.color}/>
            </div>
        )
    }
}

Children.js:

import React from "react";import Grandson from "./Grandson";import PropTypes from "prop-types";export default class Children extends React.Component{    //后代必须验证  不验证就没有 上下文
   static contextTypes={        color:PropTypes.string
    }    constructor(props){        super(props);
    }

    render(){        console.log(this.context);        return (            <div>
                <h1 style={{color:this.context.color}}>儿子</h1>
                <Grandson/>
            </div>
        )
    }
}

Gandson.js:

import React from "react";import PropTypes from "prop-types";export default class Grandson extends React.Component{   //必须校验  才能拿到
  static contextTypes={        //只要是后代  都可以通过这样的方式获取上下文
    color:PropTypes.string
    }    constructor(props,context){        super(props);        //第二个参数是 上下文context 默认传的
    console.log(context);        //这是映射
    this.state={...context};       //相当于这个  默认内部执行了这个:this.props=props;
  }

    render(){        return (            <div style={{color:this.context.color}}>孙子</div>
        )
    }
}



作者:张靖bibibi
链接:https://www.jianshu.com/p/50ac1e0e6799


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消