脚本宝典收集整理的这篇文章主要介绍了初识React(6):propTypes类型检测,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
PRopTyPEs是react中用来对参数进行类型检测的,当然要使用这个插件,得先安装这个插件,如下:
npm install prop-types --save
但是如果你是直接用dva创建的项目,无需安装,直接引入即可,如下:
import React from 'react';
import PropTypes from 'prop-types';
class PropType extends React.Component {
render() {
return (
<div>
<div>123</div>
<div>{this.props.content}</div>
</div>
)
}
}
PropType.propTypes = {
content:PropTypes.string.isRequired
}
export default PropType;
上面那个例子中可以看出,要引入组件PropType,必须得传入参数类型为字符串的content参数,否则会报错
import React from 'react';
import { connect } from 'dva';
import PropType from './propTypes/propTypes.js'
function IndexPage() {
return (
<div>
<PropType content={"123"}/>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
PropTypes常用的数据类型检测如下:
- 字符串类型PropTypes.string
- 布尔类型PropTypes.bool
- 函数类型PropTypes.func
- 数组类型PropTypes.array
- 数字类型PropTypes.number
- 对象类型PropTypes.object
- 元素PropTypes.element
- 传入任何东西都可以PropTypes.node
- 选择特定值PropTypes.oneof(['是', '否', "是否"])
- 选择诸多类型中的一种(任意类型)PropTypes.oneOfType:
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
11.具有某种类型的数组PropTypes.arrayOf(PropTypes.number):
PropTypes.arrayOf(PropTypes.number)
12.具有某种类型属性值的对象PropTypes.objectOf(React.PropTypes.number)
PropTypes.objectOf(React.PropTypes.number)
13.样式类型PropTypes.Shape
PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
14.任何数据类型PropTypes.any.isRequired
注意: isRequired表示必要的参数,如果设置了isRequired没有参数传过来,则会报错
以上是脚本宝典为你收集整理的初识React(6):propTypes类型检测全部内容,希望文章能够帮你解决初识React(6):propTypes类型检测所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。