美文网首页
react 检测传值类型

react 检测传值类型

作者: 琳媚儿 | 来源:发表于2021-01-10 15:20 被阅读0次
yarn add prop-types

子组件在接收父组件传过来值得时候,可以对属性值进行类型检测

Son.propTypes = {
     optionalArray: PropTypes.array,//检测数组类型
     optionalBool: PropTypes.bool,//检测布尔类型
     optionalFunc: PropTypes.func,//检测函数(Function类型)
     optionalNumber: PropTypes.number,//检测数字
     optionalObject: PropTypes.object,//检测对象
     optionalString: PropTypes.string,//检测字符串
     optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}
传值给默认值
 TodoItem.defaultProps={
    test:'Hello World'
 }

arrayOf,objectOf实现多重嵌套检测
arrayOf接收一个参数,这个参数是规定的数组元素的数据类型.objectOf接收的参数则是属性的数据类型

TodoItem.propTypes = {
     array:PropTypes.arrayOf(PropTypes.number)   //只能是数组,传得值只能是数字类型
     array:PropTypes.oneOfType([PropTypes.number,PropTypes.string)])    //数字类型和字符串类型其中一个满足就可以
}

相关文章

  • react 检测传值类型

    子组件在接收父组件传过来值得时候,可以对属性值进行类型检测 arrayOf,objectOf实现多重嵌套检测arr...

  • 我不知道的JavaScript

    Number.prototype.toFixed返回值是String类型 在给React组件传prop的时候,对一...

  • js-Array.isArray()

    语法 参数object:要检测的内容 返回值 返回值是布尔类型的。如果传进来的object是数组,返回true,如...

  • React Native学习笔记(七)-页面跳转、传值、回传

    React Native页面跳转、传值、回传 Navigator --- 在React Native中的不同页面我...

  • JavaScript学习 之 传值or传引用

    目录 引言 传值? 传引用? 基础类型传值-对象类型传引用? 传共享! 小结 引言 JavaScript的函数参数...

  • react 学习

    包含 react基础 react传值 react路由 和redux管理 和react-redux reactDom...

  • React Native --传值

    今天主要记录一下react native的几种传值方式; 1.navigator传值 在此就不记录react-na...

  • 学习react的第二天(1)

    react组件传值 为了防止数据乱流,react规定,不借助外力,只支持父子传值 父 -> 子 1. 在父元素中,...

  • java调用方法传递机制

    java是传值,不是传引用,有人说有的人说:基础类型传值,对象类型传引用。其实对象类也是传值,只不过对象的值恰好是...

  • 参数按值传递

    参数如果是基本类型是按值传递,如果是引用类型按共享传递。 1、按值传值 2、共享传值 共享传值: 按引用传递是传...

网友评论

      本文标题:react 检测传值类型

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