目前即16.8版本之后的React,将类型限制文件单独安装引入,而不再是直接挂载在 React实例上面
1、安装 PropTypes :
yarn add prop-types
2、引入 PropTypes :
import PropTypes from 'prop-types'
示例:
// 子组件中
// 引入 prop-types
import PropTypes from 'prop-types'
export default function MyChild(props) {
console.log('==props==', props)
const {name, onChangeName, children} = props
const handleChangeName = () => {
onChangeName('Andy')
}
return (
<div>
<h3>子组件中获取Props中的属性方法</h3>
<p>My name is: {name}</p>
<button type="button" onClick={handleChangeName}>修改姓名</button>
{children}
</div>
)
}
// 定义组件中 props 属性的 类型
MyChild.prototype = {
name: PropTypes.string.isRequired, // 必填
onChangeName: PropTypes.func, // 非必填
children: PropTypes.any
}
3、PropTypes 常用的类型:
PropTypes.string
:字符串类型。
PropTypes.number
:数字类型。
PropTypes.bool
:布尔类型。
PropTypes.array
:数组类型。
PropTypes.object
:对象类型。
PropTypes.func
:函数类型。
PropTypes.symbol
:唯一的类型。
PropTypes.bigint
:最大值类型。
PropTypes.node
:可以是任何可渲染的东西(字符串、数字、组件等)。
PropTypes.element
:React元素类型。
PropTypes.oneOf
:可以是特定的几个值之一,
如: PropTypes.oneOf(['success', 'failure'])
表示 failure
或 success
之一。
PropTypes.arrayOf
:数组中的元素类型,
如: PropTypes.arrayOf(PropTypes.string)
表示字符串数组,等价于 TS 中的 string[]
。
PropTypes.objectOf
:对象的值类型,
如: PropTypes.objectOf(PropTypes.string)
表示字符串对象,
等价于 TS 中的 { [key: string]: string }
。
PropTypes.instanceOf
:特定类的实例
,
如: PropTypes.instanceOf(MyClass)
表示 MyClass 的实例。
PropTypes.shape({})
:特定形状的对象。
PropTypes.exact
:限定对象类型,且可以指定对象的哪些属性必须有,哪些属性可以没有。如果出现没有定义的属性,会出现警告。
如: PropTypes.exact({ name: PropTypes.string, age: PropTypes.number }).isRequired
表示对象中包含 name 和 age 属性,且都为必填项。等价于 TS
中的 { name: string, age: number }
。
4、PropTypes 类型设置示例:
// 特定形状对象
MyChild.propTypes = {
// 定义一个学生对象的类型
studentObj: PropTypes.shape({
age: PropTypes.number,
name: PropTypes.string,
grade: PropTypes.string
})
// 定义一个数组对象类型
userArr:PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.required,
name: PropTypes.string,
age: PropTypes.number,
sex: PropTypes.string
})
).isRequired
// 定义只限定 某几个值的,
status: PropTypes.oneOf(['SUCCESS', 'FAILURE'])
// 定义一个 numbersObj对象,并且对象中的每一项的值 也是 number类型
numbersObj: PropTypes.objectOf(PropTypes.number)
}
5、PropTypes 设置默认值:
// 类式组件中常用这种方式给定默认值;
MyChild.defaultProps = {
name: 'Andy'
}
// 函数式组件中更推荐使用如下默认值
export default function MyChild({name='Andy', onChengName, children}) {}
6、PropTypes 有哪些用途:
a、减少线上类型错误:PropTypes 可以在开发阶段就发现错误,减少正式环境中出现类型不匹配的问题。这有助于减少调试时间和提高代码质量。
b、规范化接口文档:通过定义 PropTypes类型,我们可以清晰地知道组件所需属性类型及数据结构。可以帮助组件使用人员更好地理解使用组件。
c、提升团队协同效率:PropTypes 可以作为团队协作的一种规范,帮助团队成员理解组件之间的关联关系和接口约定,减少了团队成员之间的沟通成本,提升团队协作效率。
d、提高维护效率:PropTypes 可以帮助我们更好地理解组件的用途。当其他成员需要修改或重构组件时,可以更快地理解组件的用途和关联关系。
更多详情请看官网 prop-types:
以上仅代表个人观点,如有错误,烦请批评指正