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
          })
     }
    

      

  • 相关阅读:
    前端的一些雕虫小技,从100%和滚动条说起
    这事没完,继续聊spring cloud stream和kafka的这些小事
    简单聊一聊spring cloud stream和kafka的那点事
    是谁,在敲打我窗-CSS雨滴动画效果
    对照谈-官方spring-boot-starter和自定义starter异同分析
    从spring boot发邮件聊到开发的友好性
    抖音抖一抖-SVG和CSS视觉故障艺术小赏
    上位机组态控件PCHMI-PLC地址命名规则
    【C#格式化字符】【C#Chart图表控件】【饼图、柱形图、波形图】
    【PCHMI.DLL】【C#上位机二次开发文档】2021年7月15更新
  • 原文地址:https://www.cnblogs.com/yetiezhu/p/12813271.html
Copyright © 2011-2022 走看看