【React组件】关于React组件通过PropTypes验证接收值的类型使用方法

最新推荐文章于 2023-11-29 09:56:25 发布

林大年

最新推荐文章于 2023-11-29 09:56:25 发布

阅读量185

点赞数

分类专栏： React 文章标签： react 组件化

本文链接：https://blog.youkuaiyun.com/llw6868/article/details/110431704

版权

React 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在React组件中使用PropTypes进行属性值的类型检查。内容包括引入依赖、验证器的使用方法及控制台的输出效果。详细步骤和官方文档链接可供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在需要验证的组件引入依赖包

import PropTypes from 'prop-types'

2、使用位置：

class testUnit extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {	}
	}
	
	render(){
		console.log("子组件渲染")
		let {msg} = this.props
		return(
			<div style={{padding:10}}>{msg}</div>
		)
	}

}
testUnit.propTypes={  // 在这里使用  类名.propTypes{ // 接收的值 }
	msg: PropTypes.string
}

3、PropTypes提供了大量的验证器如：

  optionalArray: PropTypes.array,  // 数组
  optionalBool: PropTypes.bool,  // 布尔
  optionalFunc: PropTypes.func,  // 函数
  optionalNumber: PropTypes.number, // 数值
  optionalObject: PropTypes.object, // 对象
  optionalString: PropTypes.string, // 字符
  optionalSymbol: PropTypes.symbol, // es6新增的symbol类型
  ...

4:、控制台输出效果：
在这里插入图片描述
参考官方文档：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper