react: 三大属性之pros

Z时代
2024-01-10
分类：综合

react

1. 简介

pros用于接收传入组件的属性信息

一般pros只用于读取,不能修改,修改pros代码会直接报错

2. 基本使用

//创建组件

class Person extends React.Component{
	constructor(props){
		//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
		// console.log(props);
		super(props)
		console.log('constructor',this.props);
	}
render(){
            return (<div></div>)
        }
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))
const p = {name:'老刘',age:18,sex:'女'}
ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))
// 上面的..p写法将p对象展开并传入到Person组件,将对象的属性名作为key,属性值作为value传入到Person组件,效果相当于下面的写法
ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))

3. 限制pros的参数类型

通过类名.propTypes, 类名.defaultProps 给类自身添加属性限制信息

      //创建组件
        class Person extends React.Component{
		render(){
                  return (<div></div>)
                }
        }
	//对标签属性进行类型、必要性的限制
	Person.propTypes = {
		name:PropTypes.string.isRequired, //限制name必传，且为字符串
		sex:PropTypes.string,//限制sex为字符串
		age:PropTypes.number,//限制age为数值
		speak:PropTypes.func,//限制speak为函数
	}
	//指定默认标签属性值
	Person.defaultProps = {
		sex:'男',//sex默认值为男
		age:18 //age默认值为18
	}
}

4. 限制pros的参数类型的简写方式

在类中,在属性前加上static表示给类自身添加属性,而不是给实例添加属性

	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(){
                  return (<div></div>)
                }
	 }