react使用 PropTypes 和 getDefaultProps()

一定要写PropTypes，切莫为了省事而不写
如果一个Props不是requied，一定在getDefaultProps中设置它
React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型，如果不正确，console中就会出现对应的warning。出于性能方面的考虑，这个API只在开发环境下使用。

基本使用方法：

propTypes: {myArray: React.PropTypes.array,myBool: React.PropTypes.bool,myFunc: React.PropTypes.func,myNumber: React.PropTypes.number,myString: React.PropTypes.string，// You can chain any of the above with `isRequired` to make sure a warning// is shown if the prop isn't provided.requiredFunc: React.PropTypes.func.isRequired
}

假如我们props不是以上类型，而是拥有复杂结构的对象怎么办？比如下面这个：

{text: 'hello world',numbers: [5, 2, 7, 9],
}

当然，我们可以直接用React.PropTypes.object,但是对象内部的数据我们却无法验证。

propTypes: {myObject: React.PropTypes.object,
}

进阶使用方法：shape() 和 arrayOf()

propTypes: {myObject: React.PropTypes.shape({text: React.PropTypes.string,numbers: React.PropTypes.arrayOf(React.PropTypes.number),})
}

下面是一个更复杂的Props：

[{name: 'Zachary He',age: 13,married: true,},{name: 'Alice Yo',name: 17,},{name: 'Jonyu Me',age: 20,married: false,}
]

综合上面，写起来应该就不难了：

propTypes: {myArray: React.PropTypes.arrayOf(React.propTypes.shape({name: React.propTypes.string.isRequired,age: React.propTypes.number.isRequired,married: React.propTypes.bool}))
}

转载于:https://www.cnblogs.com/Lewiskycc/p/7411326.html

react使用 PropTypes 和 getDefaultProps()相关推荐

[react] 使用PropTypes和Flow有什么区别？
[react] 使用PropTypes和Flow有什么区别? Flow 是一个针对react项目所有 JavaScript 代码的静态类型检测器,需要单独添加依赖并手动运行 PropTypes是针对组 ...
react 之 prop-types
react 之 prop-types 原文地址在开发过程当中,经常会用到Prop的type校验,但是React.PropTypes和React.createClass这两个功能在React 15.5 ...
如何使用验证 React 道具PropTypes
Props 和 PropTypes 是在 React 组件之间传递只读属性的重要机制. 我们可以使用 React props(属性的缩写)将数据从一个组件发送到另一个组件.如果一个组件接收到错误类型的 ...
react 使用 PropTypes 进行类型检查
目录前言一.安装 prop-types 插件二.PropTypes 的规则 1.PropTypes 的一系列验证 (1).检测 JS 原生类型 (2).检测任何元素 (3).检测 react 元 ...
react中prop-types的使用
什么是prop-types?prop代表父组件传递过来的值,types代表类型.简单来说就是用来校验父组件传递过来值的类型首先你需要通过在终端npm/yarn install/add prop-ty ...
React 的 PropTypes
在 React 中,prop 是从外部传递给组件的数据,可以说是组件对外的一个接口属性,它也是应该有对应的规范的,比方说: 这个组件支持哪些 prop 每个 prop 应该是怎么样的格式而 Reac ...
React的PropTypes和DefaultProps
文章目录 propTypes PropTypes的验证器基本的JS类型任何可以被渲染的元素 react元素某个类的实例枚举类型指定多个类型指定某个类型的数组指定类型为对象且对象的属性是特 ...
React基础—PropTypes类型检查
1. PropTypes类型检查自 React v15.5 起,React.PropTypes已移入另一个包中.请使用prop-types库代替. 这里使用的方式是手脚架方式创建的项目,即: > ...
React高级-PropTypes校验传递值
PropTypes的简单应用我们在Xiaojiejie.js组件里传递了4个值,有字符串,有数字,有方法,这些都是可以使用PropTypes限制的.在使用需要先引入PropTypes. import ...

react使用 PropTypes 和 getDefaultProps()

基本使用方法：

react使用 PropTypes 和 getDefaultProps()相关推荐

最新文章

热门文章