react组件的 props

组件的 props

1.props的作用

接收传递给组件数据

2.实现方式

①函数

//2.接收数据
const Hello = (props) =>{
  //props是一个对象
  return (
    <div>
      <h1>props:{props.name}</h1>
    </div>
  )
}

//1.传递数据
ReactDOM.render(<Hello name="jack" age={23}/>,document.getElementById('root'))

②组件

//2.接收数据
class Hello extends React.Component {
  render() {
    return (
      <div>
        <h1>props:{this.props.name}</h1>
      </div>
    )
  }
}

//1.传递数据
ReactDOM.render(<Hello name="jack" age={23}/>,document.getElementById('root'))

3.特点

1.可以给组件传递任意类型的数据
2.props是只读的对象，只能读取属性的值，无法修改对象
3.注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则无法在构造函数中获取到props

//2.接收数据
class Hello extends React.Component {
  constructor(props) {
    super(props)
    //console.log(this.props);
    console.log(props);
  }
  render() {
    return (
      <div>
        <h1>props:{this.props.name}</h1>
      </div>
    )
  }
}

//1.传递数据
ReactDOM.render(<Hello name="jack" age={23}/>,document.getElementById('root'))