美文网首页
props规则校验与defaultProps基础用法

props规则校验与defaultProps基础用法

作者: DancingBUG | 来源:发表于2018-12-13 17:44 被阅读0次

    了解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查看哦!

    相关文章

      网友评论

          本文标题:props规则校验与defaultProps基础用法

          本文链接:https://www.haomeiwen.com/subject/uspbhqtx.html