react context prop-types-白红宇

react context prop-types

阅读量：4519 次

发布时间：2019-06-08

本文共 925 字，大约阅读时间需要 3 分钟。

react里面的context（上下文）的用途：

　　我们都知道在 React 中父子组件可以通过 props 自顶向下的传递数据。但是当组件深度嵌套时，从顶层组件向最内层组件传递数据就不那么方便了。手动在每一层组件上逐级传递 prop 不仅书写起来很繁琐同时还会为夹在中间的组件引入不必要的 prop。这时 Context API 就派上用场了。你只需要在外层组件上声明要传递给子组件的 Context，就可以在父级下的所有组件里面访问到你需要的数据。

用法：

1 class Parent extends React.Component {2   getChildContext() { //现在父级组件里面这样去写你要传下去的数据3     return {color: "purple"};4   }5 }6 7 Parent.childContextTypes = {
   //在定义父组件之后  一定要写PropType（类型检测），否则报错，执行不了8   color: PropTypes.string9 };

1 class Child extends React.Component { 2   render() { 3     return ( 4        5         {
   this.context.color}//在子组件里面通过该方法直接调用 6       
 7     ); 8   } 9 }10 11 Child.contextTypes = {
   //必须进行类型检测，如果没有的话，不会报错，但是会没有该值12   color: PropTypes.string13 };

总结：

　　父组件需要用getChildContext()方法 return一个对象，里面以key：val的形式传递你要传递的信息

　　父组件要对要传输的值进行类型检测，否则会报错

　　子组件要用this.context[key] 调用你需要的数据

　　子组件也需要对你需要的值进行类型检测，否则没有该值

转载于:https://www.cnblogs.com/web-chuan/p/9934966.html

你可能感兴趣的文章