react-prop

1.什么是prop

在react中，prop是外部传递给组件的数据。
每个react组件都是一个独立的模块，组件之外的一切就是外部世界，外部世界是通过prop来和组件对话的。

2.prop赋值

父组件使用prop给子组件传递数据

class List extends Component { 
	render() {
		return ( 
			<div> 
				<Item name='小明' age={18}/> //这里的name 和 age 就是传递给子组件的prop数据
				<Item name='小红' age={20}/>
			</div>
		)
	}
	
}

【注】使用prop传递的数据，除字符串以外都要使用{}，style样式使用{{}}

3.prop取值

在子组件获取父组件传递过来的prop数据，需要使用一个构造函数，构造函数如下：

class Item extends Component {
	constructor(props) { //构造函数
		super(props);
		
		this.state = {
			name: props.name,
			age: props.age
		}
	}
}

【注】如果一个组件要定义自己的构造函数，一定要在构造函数里的第一行使用 super调用父类，如果没有调用super(props)，就无法使用this.props访问到父组件传递过来的props值

render() {
	return(
		<div>
			<div>
				姓名:{this.state.name} 年龄:{this.state.age}岁
			</div>
		</div>
	)
}

4.propType检查

这个是对prop的一种规范，规定这个组件支持哪些prop，每个prop的类型是什么样的格式
比如：

Item.propTypes = {
	name: PropTypes.string.isRequired,
	age: PropTypes.number
}

其中 string是指定为字符串类型，isRequired则指定为必传（如果不传会报错）

import PropTypes from 'prop-types'; //引入propTypes

class Item extends Component {
	constructor(props) { 
		super(props);
		
		this.state = {
			name: props.name,
			age: props.age
		}
	}

	render() {
		return(
			<div>
				<div>
					姓名:{this.state.name} 年龄:{this.state.age}岁
				</div>
			</div>
		)
	}
}

//规定prop类型
Item.propTypes = {
	name: PropTypes.string.isRequired,
	age: PropTypes.number
}

export default Item;

【注】规定了propTypes以后，无论是传递prop的类型错误，还是prop的必要值没传，都会在控制台引发报错，但是不会影响正常渲染