React中队prop进行类型限制_react18 proptypes-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/121560086

本文介绍如何在React应用中使用PropTypes库对组件props进行类型检查和设置默认值。通过`npm i prop-types`安装后，我们可以导入并使用PropTypes来定义组件所需的prop类型和默认值，确保代码的质量和健壮性。

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

在类型传递中,我们要对prop中的类型进行限制

最新版本有一个PropTypes进行处理

安装:npm i prop-types

引入:import PropTypes from 'prop-types'

使用:


Person.propTypes = {   //你类的属性规则 ,, static相当于直接给类本身添加了属性
                name: PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number,
                spack: PropTypes.func  
            }

指定默认标签:

Person.defaultProps = {
				sex:'男',//sex默认值为男
				age:18 //age默认值为18
			}

如果是在类里面;

	class Person extends React.Component{

			constructor(props){
				//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
				// console.log(props);
				super(props)
				console.log('constructor',this.props);
			}

			//对标签属性进行类型、必要性的限制
			static propTypes = {
				name:PropTypes.string.isRequired, //限制name必传，且为字符串
				sex:PropTypes.string,//限制sex为字符串
				age:PropTypes.number,//限制age为数值
			}

			//指定默认标签属性值
			static defaultProps = {
				sex:'男',//sex默认值为男
				age:18 //age默认值为18
			}
	render(){
				// console.log(this);
				const {name,age,sex} = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age+1}</li>
					</ul>
				)
			}
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))