关于React的正确打开方式（二）父子间通讯—子传父篇 持续更新中...

组件之间的通信（子传父篇）

父子组件通信方式

• 父传子----采用传递数据
• 子传父----采用传递方法
• ref标记（父组件拿到子组件的引用，从而调用子组件的方法）

子传父通信的描述

我们通过前面的属性props知道了可以通过props来实现父组件对子组件的传值操作。

但是在实际应用当中我们不止需要通过父组件向子组件进行传值，我们还存在子组件向父组件传值的场景。

如何实现子组件向父组件传值：

• 与父传子不同的是，父传子是通过props属性对节点的绑定实现的传值，也就是说，直接通过对props传递数据实现
• 子传父与父传子不同的是，通过向子组件的props上挂载一个方法，然后再子组件去调用props中的这个方法，以形式参数的方式将子组件的数据传入该方法从而实现将子组件的数据传递到父组件

子组件向父组件传值的具体实现

1. 在父组件定义一个用于接收从子组件传递参数的方法，该方法一般情况下定义有接收子组件数据的变量

2. 然后再对应的父组件上将刚刚定义的数据传递方法挂载到子组件的props属性上

   <父组件名  挂载在子组件props的方法名={this.父组件定义的用于接收子组件数据的方法.bind(this)}  />
   

3. 通过以上两步，我们就已经将传递数据的方法挂载在子组件的props上了

4. 接下来，我们就需要在子组件相应的地方去调用父组件挂载在子组件的props属性上的传递数据方法，并将要传递的参数通过形式参数传递到方法内部并执行该方法，从而实现数据的传递

/*
*				父组件
*/

import React, { Component } from 'react'
import ChildToFat from './childToFat'

export default class componentName extends Component {
    state={
        name:''
    }
    MyEvent = (arg)=>{
        this.setState({
            name:arg
        })
    }
    render() {
        return (
            <div>
                <ChildToFat propsEvent={this.MyEvent.bind(this)}/>
                {this.state.name}
            </div>
        )
    }
}

/*
*		子组件
*/
import React, { Component } from 'react'
export default class ChildToFat extends Component {
    state={
        log:'child'
    }
    render() {
        return (
            <div>
          {/* 
          		点击这个按钮调用父组件传过来的MyEvent函数，
          		也就是说，想要实现子传父通信，
          		可以通过在子组件内部调用父组件传过来的回调函数来实现 
          	*/}
                <button onClick={()=>{this.props.MyEvent('child')}} >子传父</button>

            </div>
        )
    }
}