作为一个前端人掌握 React 组件 props 的校验写法,增加组件的健壮性肯定是必备的知识点之一。如果一个组件没有 props 数据校验那么它是没有灵魂的也很难被推广应用开。下面我们来看一下怎么为 React 组件的 props 添加校验吧
首先 React 组件的 props 添加校验我们需要安装一个校验包:
实现步骤
-
安装属性校验包:
yarn add prop-types 或者 npm install --save prop-types
- 导入
prop-types
包 - 使用
组件名.propTypes = {}
给组件添加校验规则
示例如下
import PropTypes from 'prop-types'
const List = props => {
const arr = props.colors
const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)
return <ul>{lis}</ul>
}
// 给 List 组件中 props 的 colors 添加校验规则:类型必须为 array 且为必填项
List.propTypes = {
colors: PropTypes.array.isRequired
}
props校验-规则说明
四种常见结构
- 常见类型:array、bool、func、number、object、string
- React 元素类型:element
- 必填项:isRequired
- 特定的结构对象:shape({})
官网文档更多阅读:Typechecking With PropTypes – React
props校验-默认值
通过 defaultProps
可以给组件的 props 设置默认值,在未传入 props 的时候生效
1. 函数组件
推荐写法:直接使用函数参数默认值。示例如下:
function List({pageSize = 10}) {
return (
<div>
此处展示props的默认值:{ pageSize }
</div>
)
}
// 不传入pageSize属性
<List />
2. 类组件
推荐写法:使用类静态属性声明默认值,static defaultProps = {}
。示例如下:
class List extends React.Component {
static defaultProps = {
pageSize: 10
}
render () {
return (
<div>
此处展示props的默认值:{this.props.pageSize}
</div>
)
}
}
<List />
函数组件和类组件都可以设置 props 默认值的方式(但不推荐)。示例如下:
class List extends React.Component {
render () {
return (
<div>list{this.props.pageSize}</div>
)
}
}
// 为 List 组件 props 中的 pageSize 设置默认值为 10
List.defaultProps = {
pageSize: 10 // 如果传了 pageSize 则以传入的为准,未传则去默认值10
}