react 函数组件props的使用

函数组建的props
1、如何给组件传递数据
给组建的标签添加属性即可
2、函数组件通过props参数就能接受 也可以通过解构props

function App（props）{
 return (
    <div>
      <h1>我是App组件--{props.name}--{props.money}<h1/>
    <div/>
  )
}
//渲染组件
React.render(<App name='zs' money={100}/>)

类组件处理props
1、不需要接收数据 直接使用this.props

class App extends React.Component{
render() {
    return (
      <div>
        <h1>我是App组件--{this.props.name}--{this.props.money}<h1/>
      <div/>
    )
  }
}
//渲染组件
React.render(<App name='zs' money={100}/>)

props的特点
1、可以传递任意类型的数据
2、props是只读的，接收到的props不能修改
3、如果在构造函数中想要使用功能props，需要调用super(props),案例如下

class App extends React.Component{
constructor(props) {
  super(props)
  console.log(this.props)
}
render() {
    return (
      <div>
        <h1>我是App组件--{this.props.name}--{this.props.money}<h1/>
      <div/>
    )
  }
}
//渲染组件
React.render(<App name='zs' money={100}/>)