web前端全系列 教程
1839个小节阅读:2243.5k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
组件可以通过props传递数据,针对传递的数据类型我们可以进行类型检查,有益于在代码运行前识别某些类型的问题
在组件的 props 上进行类型检查,要引用prop-types
库提供一系列验证器:
xxxxxxxxxx
import PropTypes from 'prop-types';
xxxxxxxxxx
//PropTypesTest.js
import PropTypes from 'prop-types';
export default class PropTypesTest extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
PropTypesTest.propTypes = {
name: PropTypes.string
};
xxxxxxxxxx
//App.js
<PropTypesTest name={{name:'baizhan'}}/>
提示:
当传入的
prop
值类型不正确时,JavaScript 控制台将会显示警告出于性能方面的考虑,
propTypes
仅在开发模式下进行检查
xxxxxxxxxx
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.symbol
// 任何可被渲染的元素(包括数字、字符串、元素或数组)
// (或 Fragment) 也包含这些类型。
PropTypes.node
// 一个 React 元素。
PropTypes.element
// 一个 React 元素类型(即,MyComponent)。
PropTypes.elementType,
// 你也可以声明 prop 为类的实例,这里使用
// JS 的 instanceof 操作符。
PropTypes.instanceOf(Message)
// 你可以让你的 prop 只能是特定的值,指定它为
// 枚举类型。
PropTypes.oneOf(['News', 'Photos'])
// 一个对象可以是几种类型中的任意一个类型
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
])
// 可以指定一个数组由某一类型的元素组成
PropTypes.arrayOf(PropTypes.number)
// 可以指定一个对象由某一类型的值组成
PropTypes.objectOf(PropTypes.number),
// 可以指定一个对象由特定的类型值组成
PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
// 你可以在任何 PropTypes 属性后面加上 `isRequired` ,确保
// 这个 prop 没有被提供时,会打印警告信息。
PropTypes.func.isRequired
// 任意类型的数据
PropTypes.any.isRequired
实时效果反馈
1. 下列说法错误的是:
A PropTypes
可以进行prop数据类型检查
B 类型检查发生错误时,控制台会给与警告
C 给类的实例对象设置propTypes
属性
D 给类设置propTypes
属性
答案
1=>C