zoukankan      html  css  js  c++  java
  • react context prop-types

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

    总结:

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

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

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

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

  • 相关阅读:
    SpringBoot与quartz集成
    SpringBoot 中使用 @Valid 注解 + Exception 全局处理器优雅处理参数验证
    搭建Redis集群和MySQL主从同步
    scanf_s读取键盘输入字符串失败
    含有通配符*的字符匹配(C语言)
    人之患
    TCP socket编程记录(C语言)
    程序变量命名规范(个人)
    h lib dll文件相关部分
    关于inet_ntop、inet_pton中的n和p分别代表的意义
  • 原文地址:https://www.cnblogs.com/web-chuan/p/9934966.html
Copyright © 2011-2022 走看看