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

    一、为什么使用prop-types

    在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。

    二、学习文档

    https://www.npmjs.com/package/prop-types npm官网
    https://reactjs.org/docs/typechecking-with-proptypes.html react官方
    

      

    三、安装与引入

    //安装
    npm install prop-types --save
    //引入
    import PropTypes from 'prop-types';
    

      

    四、它可以检测的类型

    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,
    

      

    五、demo

    import React, { Component } from 'react'
    import PropTypes from 'prop-types';
    
    //子组件
    class Children extends Component {    
      //如果没有传递该属性时的默认值
      static defaultProps = {        //写class里面就用static 如果是外面就是下面的写法
        name: 'default'
      }
    
      static propTypes = {
        //如果传递该属性,该属性值必须为字符串
        name: PropTypes.string
      }
    
      render() {
        return (
          <div>
            {this.props.name}
          </div>
        )
      }
    }
    //如果没有传递该属性时的默认值
    // Children.defaultProps = {
    //   name: 'default'
    // }
    
    // Children.propTypes = {
    //   //如果传递该属性,该属性值必须为字符串
    //   name: PropTypes.string.isRequired
    // }
    //父组件
    export default class Home extends Component {
      render() {
        return (
          <div>
            <Children/>
            Home
          </div>
        )
      }
    }
            
    

      

    七、使用isRequired设置属性为必须传递的值

    static propTypes={
        name:PropTypes.string.isRequired
      }
    

      

    八、arrOf和objectOf多重嵌套类型检测

      optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
     
      optionalObjectOf: PropTypes.objectOf(PropTypes.number),
      //示例
      static propTypes = {
            todoList:PropTypes.arrayOf(PropTypes.shape({
                id:PropTypes.string.isRequired,
                text:PropTypes.string
            }))
        }
    

      

    九、shape检测不同对象的不同属性的不同数据类型

      optionalObjectWithShape: PropTypes.shape({
        optionalProperty: PropTypes.string,
        requiredProperty: PropTypes.number.isRequired
      }),
      //示例
      static propTypes = {
         object:PropTypes.shape({
             name:PropTypes.string,
             age:PropTypes.number
          })
     }
    

      

  • 相关阅读:
    struts.xml配置详解 内部资料 请勿转载 谢谢合作
    Struts框架2ActionError类 内部资料 请勿转载 谢谢合作
    Struts框架 内部资料 请勿转载 谢谢合作
    JDBC 内部资料 请勿转载 谢谢合作
    JSP 实现◆菱形 三角形△ 的输出
    JSP实现 乘法口诀输出
    GUID 全局统一标识符的介绍
    Java 基础 Map 练习题
    Java 异常处理 练习2
    Java 异常处理
  • 原文地址:https://www.cnblogs.com/yetiezhu/p/12813271.html
Copyright © 2011-2022 走看看