react中组件是封闭的,要接收外部数据需要通过props来实现
props的作用:接收传递给组件的数据
传递数据:给组件标签添加属性 如:
<Hello name='张三' age={19} />
这样表示给组件传递两个数据name和age。
注意除了字符串类型外,传递其余类型数据需要使用{};
传递的数据在接收时,根据组件类型也有不同的接收方式:
1.当组件为函数组件时,通过参数props接收数据;如:
function Hello(props) {
return {
<div>接收到的数据:{props.name}</div>
}
}
2.当组件为类组件时,通过this.props接收数据;如:
class Hello extent React.Component{
render() {
return {
<div>接收到的数据为:{this.props.name}</div>
}
}
}
特点:
1.可以给组件传递任意类型的数据(包括数组、对象、函数甚至jsx);
2.props是只读的对象,只能读取传递过来的属性值,而不能修改对象;
3.注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则在构造函数中无法获得props!
class Hi extends React.Component {
constructor(props){
// 推荐奖props传递给父类构造函数
super(props);
console.log(this.props)//如果没有传递props,该语句将会输出undefined
}
render(){
return <div>name:{this.props.name}</div>
}
}