react学习-组件通信-父传子props

组件通讯

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能 拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据 。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

props

组件是封闭的，要接收外部数据应该通过 props 来实现 。props的作用：接收传递给组件的数据

传递数据

在使用组件时，给组件标签添加属性

接收数据

函数组件通过参数props接收数据，类组件通过 this.props 接收数据

import React , { Component } from 'react';
function Hello (props) {
  console.log(props)
  return <div>子组件Hello {props.name}-{props.age}</div>
}
class Hello1 extends Component{
  constructor (props) {
    super(props)
    console.log(this.props)
  }
  render () {
    return <div>子组件Hello1 
      {this.props.name}-{this.props.age}
    </div>
  }
}

export default class A extends Component{
  state = {
    age: 18
  }
  hClick = () => {
    let {age} = this.state
    age++
    this.setState({age})
  }
  render () {
    return <div onClick={this.hClick}>

    <Hello name="1" age={this.state.age}></Hello>
    <br/>
    <Hello1 name="1" age={this.state.age}></Hello1>
    </div>
  }
}

组件是一个特殊的标签，标签上的属性及属性值将会自动被收集到函数组件的形式中，这个形参一般命名为props。它是一个对象，以键值对的格式保存属性及值。

注意：

1. 可以给组件传递任意类型的数据
2. props 是只读（const）的对象，只能读取属性的值，无法修改对象
3. 父组件传给子组件的props具有响应式的特点：如果父组件中通过this.setState修改了数据，则在子组件中视图也将变化。
4. 注意：使用类组件时，如果写了构造函数，应该将 props 传递给 super()，否则，无法在构造函数中获取到 props。当然，你可以在render()中正常拿到。