props 向组件传递数据

组件通过props来接收传递给组件的内容

传递数据

在组件标签上添加属性即可向组件传递数据

// 向组件abc 传递一个name属性值为abc
ReactDOM.render(<Abc name='abc'/>)

接收数据

函数组件

函数组件接收数据props直接作为形参

const Abc = props = >{
    return (
      <div>{props.name}</div>
  )
}

类组件

类组件通过this.props接收

class Abc extends React.Componet{
    render(){
      return (
          <div>{this.props.name}</div>
      )
  }
}

注意

// props 是一个对象 传递数据时可以是任意类型的数据 而且没有数量限制
<Abc name="abc" 
  whide={120} 
  arr={[1,2,3]}
  fn={()=>{console.log('fn')}}
  tag={<div>JSX</div>
}/>
// props接收到的数据只读不能修改
// constructor方法中无法直接获取到props需要将其作为参数 并在super()方法中调用
class Abc extends React.Componet{
  constrnctor(props){
      super(props)
    console.log(props)
  }
    rendet(){
      return (
        <div>注意</div>
    )
  }
}