props规则校验与defaultProps基础用法

了解vue和小程序的同学应该知道,在vue和小程序中我们可以很方便的给属性做类型校验已经设定默认值,那么在react中可能相对麻烦一些,下面是教程:

  1. 如果使用了create-react-app搭建的项目会自带一个prop-types的包,我们需要在子组件中导入它,注意大小写哦。
    import PropTypes from 'prop-types'
    
  2. 开始对子组件的属性做校验,再次注意大小写,声明时prop的p要小写,赋值时要大写:
    当前class名.propTypes = {
      父组件传递过来的属性1: PropTypes.number,
      父组件传递过来的属性2: PropTypes.func, //类型为函数
      父组件传递过来的属性3: PropTypes.oneOfType([ 
        PropTypes.number,  PropTypes.string 
      ]), //类型既可以为数字,又可以为字符串
      父组件传递过来的属性4: PropTypes.string.isRequired //必须传递一个字符串
      
    }
    
    当前class名.defaultProps = {
      父组件传递过来的属性4: '我是默认值' //父组件就算不传值,且子组件又必须接收,就可以设默认值
    }
    
    

更多用法可以去https://reactjs.org/docs/typechecking-with-proptypes.html查看哦!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,508评论 1 33
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,104评论 2 35
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,283评论 2 21
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,040评论 0 1
  • React简介 (1)简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc...
    鱼鱼吃猫猫阅读 1,663评论 1 6