实现步骤
- 安装属性校验包:
yarn add 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.propTypes = {
colors: PropTypes.array
}
规则说明
四种常见结构
- 常见类型:array、bool、func、number、object、string
- React元素类型:element
- 必填项:isRequired
- 特定的结构对象:shape({})
// 常见类型
optionalFunc: PropTypes.func,
// 必填 只需要在类型后面串联一个isRequired
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
props 默认值
目标任务:
掌握如何给组件的 props 提供默认值
通过
defaultProps
可以给组件的props设置默认值,在未传入props的时候生效
1. 函数组件
直接使用函数参数默认值
function List({pageSize = 10}) {
return (
<div>
此处展示props的默认值:{ pageSize }
</div>
)
}
// 不传入pageSize属性
<List />
2. 类组件
使用类静态属性声明默认值,static defaultProps = {}
class List extends Component {
static defaultProps = {
pageSize: 10
}
render() {
return (
<div>
此处展示props的默认值:{this.props.pageSize}
</div>
)
}
}
<List />