React第六节 组件属性prop的propTypes类型使用介绍

目前即16.8 版本之后的React,将类型限制文件单独安装引入,而不再是直接挂载在 React实例上面

1、安装 PropTypes :

yarn add prop-types

2、引入 PropTypes :

import PropTypes from 'prop-types'

示例:

javascript 复制代码
// 子组件中
// 引入 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.elementReact元素类型
PropTypes.oneOf可以是特定的几个值之一

如: PropTypes.oneOf(['success', 'failure']) 表示 failuresuccess 之一。
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 类型设置示例:

javascript 复制代码
// 特定形状对象
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

以上仅代表个人观点,如有错误,烦请批评指正

相关推荐
花落文心1 小时前
使用 html2canvas + jspdf 实现页面元素下载为pdf文件
前端·javascript·pdf
掘金安东尼1 小时前
🚀 6 行 HTML,让应用瞬间“起飞”:Speculation Rules API 全解析
前端·api·浏览器
望获linux2 小时前
【Linux基础知识系列】第一百一十篇 - 使用Nmap进行网络安全扫描
java·linux·开发语言·前端·数据库·信息可视化·php
乘乘凉2 小时前
Python中函数的闭包和装饰器
前端·数据库·python
Fantastic_sj3 小时前
部分CSS笔试题讲解
前端·css
雷达学弱狗5 小时前
链式法则解释上游梯度应用
开发语言·前端·javascript
爱隐身的官人6 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML7 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
烛阴10 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者10 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js