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)
    }
  • 相关阅读:
    完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...
    构建自己的NSZombie
    如何以代码形式插入断点
    根据坐标点显示地图显示范围(高德地图)
    ios7 UITableView 分割线在 使用selectedBackgroundView 选中时有些不显示
    runtime MethodSwizzle 实践之 奇怪crash : [UIKeyboardLayoutStar release]: message sent to deallocated instance
    Jmeter(十一)
    Jmeter(十)
    Jmeter(九)
    Jmeter(八)
  • 原文地址:https://www.cnblogs.com/ly2019/p/11215951.html
Copyright © 2011-2022 走看看