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