PropType导出一系列验证器,这些验证器可以用来确保接收到的数据是有效的。
- 在验证属性之前,要先安装一个propTypes库,执行npm i -S prop-types
- 使用之前要先引入prop-type
- 验证属性前要先定义好一个对象,添加属性验证
- 不要忘了将定义好的对象挂载在组件上面
我们可以设定一个属性是一个特定的js类型,默认情况下,下面的这些都是可选的
PropTypes.array,
PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.symbol,
看个简单的例子:
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>donna, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
在这个例子中,我们使用了PropTypes字符串。当为name提供无效值时,将在JavaScript控制台中显示警告。出于性能原因,仅在开发模式中检查PropTypes。
PropTypes.node,//任何可以被渲染的节点(包括数字,字符串,元素和数组)
PropTypes.element,//一个react 元素,也包括组件
用法和上面的相同,所以就不再举例子了
PropTypes.oneOf(['news','photos'])//限制属性在特定的数值中
嗯、看例子
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>donna, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.oneOf(['donna','leo','Mary','momo'])
};
将name的值限制在['donna','leo','Mary','momo']中,如果给name提供值不再这个数组中,那么浏览器就会报错提示
PropTypes.oneOfType([
PropTypes.string,
PropType.number
])//限制属性可以是多种类型之一
这个用法和上面的很相似,就不再举例了
PropTypes.arrayOf(PropTypes.number)//确定类型的数组
看下面的例子
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>donna, {this.props.arr}</h1>
);
}
}
Greeting.propTypes = {
arr: PropTypes.arrayOf(PropTypes.object)
};
如果arr数组里面的值的类型不是对象的类型,浏览器就会报错
PropTypes.objectOf(PropTypes.number)//确定类型的对象
用法同上,不再举例
敲黑板划重点了,下面这个据说很重要
PropTypes.shape({
color:PropTypes.string,
fontSize:PropTypes.number
})
//验证属性的样式是否符合样式的设置
用法也很简单了,嗯,看下面
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>donna, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.shape([
color:PropTypes.string,
fontSize:PropTypes.number
])
};
上面的例子中验证了name的颜色是不是字符串格式,字号是不是设置为数字格式
看完上面的例子有没有觉得,哇偶,好简单呐,嗯。其实就是这么so easy
嗯,接收一下挑战,看个稍微难一点点的
import React, {Component} from 'react';
import PropTypes from 'prop-types';//引入prop-type
let propTypes = {定义一个对象,添加属性验证
time:PropTypes.string,
content:PropTypes.string,
name:PropTypes.string,
subComment:PropTypes.arrayOf(PropTypes.object)
}
export default class First extends React.Component{
render(){
let {date,time,name,content,avatar,subComment} = this.props;
return <div className="first">
<div className="wrap">
<div className="img"><img src={avatar}/></div>
<div className="ifo">
<p className="one"><span className="name">{name}</span><em className="time">{time}</em></p>
<p className="two"><span className="content">{content}</span></p>
<p><span><a className="rsp" href="javascript:;">回复</a></span></p>
</div>
</div>
</div>
}
}
First.propTypes = propTypes;//将定义好的对象挂载在组件上面
React 提供了一个 isRequired 属性,其功能和html标签中'required'一致
PropTypes.func.isRequired
还是看例子吧
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>donna, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string.isRequired
};
name必须提供值,如果没有为name提供值,那么就会报错
默认属性 Default Props
为某个属性设置默认值,如果我们在提供数据的时候没有为该值设置值,那么这个属性值就为默认值
注意:验证属性的时候,默认值也会被验证
嗯,看例子
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>donna, {this.props.name}</h1>
);
}
}
Greeting.propTypes.defaultProps = {
name:'donna'
}
Greeting.propTypes = {
name: PropTypes.string.isRequired
};
如果我们没有为name提供值,那么name的值就是donna,同时虽然name设置了必须设置,那即便我们没有为name提供值,此时也不会报错
OK,今天就聊这些了,有些说法是我自己认为的比较合适的说法,但也不确定是否准确,如果有什么说的不妥之处,欢迎提出您的宝贵意见。