zoukankan      html  css  js  c++  java
  • react 中的PropTypes与DefaultProps

    每个组件都有自己的props参数,这参数是从父组件接收的一些属性。那我们应该如何对参数的类型做校验,如何定义参数的默认值呢? 

    1.使用PropTypes校验父组件传过来的参数是否合法

    import PropTypes from 'prop-types';
    TodoItem.propTypes = {
        content: PropTypes.string,
        handleItemDelete: PropTypes.func,
        index: PropTypes.number
    }

    如上面代码所示,先引用 proptypes,再为 TodoItem 组件校验从父组件接收过来的参数。一般开发的时候建议把 PropTypes 写上,这样传值不对的时候,就会有一个明显的警告,不容易遇到坑。

    如果在子组件写了一个父组件传值中没有的参数,代码不会报任何错误,只不过参数没有接收,不会显示而已。对于没有传递过来的参数,子组件是不会进行校验的,但如果这个参数是必要的,我们可以进行强制校验

        test: PropTypes.string.isRequired

    isRequired 表示父组件必须要向子组件传递。

    2. 使用 DefaultProps 给参数设置默认值

    如果子组件要求父组件必须向子组件传递这个参数,但父组件没办法传递这个参数,可以给这个参数设置一个默认值。

    import PropTypes from 'prop-types';
    TodoItem.propTypes = {
        content: PropTypes.string,
        handleItemDelete: PropTypes.func,
        index: PropTypes.number,
        test: PropTypes.string.isRequired
    }
    TodoItem.defaultProps = {
        test: 'hello~'
    }

    3. 如果要求这个参数不仅可以是 string 类型, 也可以是 number 类型

    import PropTypes from 'prop-types';
    TodoItem.propTypes = {
        test: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    }

    arrayOf表示test是一个数组,数组里面的内容可以是string,也可以是number

    import PropTypes from 'prop-types';
    TodoItem.propTypes = {
        test: PropTypes.arrayOf(PropTypes.string, PropTypes.number)
    }
  • 相关阅读:
    利用SVN合并代码(merge)
    Swagger UI初识
    Jenkins详细教程
    Hangfire 分布式后端作业调度框架服务
    【转】Centos下MySQL使用总结
    MySQL基础
    IDE:IDEA Commit Changes Dialog local changes refresh
    JavaEE:JavaEE技术组成
    MyBatis-Exception:org.apache.ibatis.exceptions.PersistenceException
    JSON-fastjson
  • 原文地址:https://www.cnblogs.com/ly2019/p/11215951.html
Copyright © 2011-2022 走看看