react组件传值

React 父子组件传值

1.子组件传值给父组件

• 通过在父组件中写一个传递函数，在子组件中调用这个函数并通过传递参数的方式来实现父子组件之间的通信

父组件中写法

export default class Father extends Component {
  state = { sonValue: {} }
  passValue = (value) => {
    console.log(value);
  }
  render () {
    return (
      <div>
        <Son passValue={this.passValue} name="张三" />
      </div>
    )
  }
}

子组件中写法

export default class Son extends Component {
  state = { passFather: { test: 1 }, stateStatus: false }
  // 给父组件传值
  passFather = () => {
    const { passFather } = this.state
    this.props.passValue(passFather)
  }
  render () {
    return (
      <div>
        <p>{this.props.name}</p>
        <button className='marginBottom' onClick={this.passFather}>点击给父组件传值</button>
      </div >
    )
  }
}

2.父组件给子组件传值

• 父组件通过类似属性名的方式来传递，在子组件的props对象中会有该属性名的键值对存在（好通俗、哈哈哈哈）