[JavaScript知识库]React_10 props

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>
    }
}