父组件和子组件之间的通信

分两种情况

• 父组件 ＝> 子组件
• 子组件 ＝> 父组件

下面我们就分别来介绍一下

父组件 ＝> 子组件

这个最常见，父组件通过 props 向子组件传递需要的信息。因为 React 的通信方式是单向的，故此方法只适用于 父组件 => 子组件。下面来看一个例子：

import React,{ Component } from 'react'

class Father extends Component {
    render (){
        let data = 'This is father data'
        return <div>
            <Child fatherToChild={ data } />
        </div>
    }
}
class Child extends Component {
    static propTypes = {
        fatherToChild: PropTypes.string
    }
    render (){
        const {props} = this
        return <div>
            <h1>{ props.fatherToChild }</h1>
        </div>
    }
}

子组件 ＝> 父组件

说白了，就是利用父组件向子组件通信时 props 可以传任何类型，包括函数的特性，然后使用回调把值传给父组件。

• 自己调用回调
• 自定义事件回调

import React,{ Component } from 'react'

class Father extends Component {
    constructor (props){
        super(props)
        this.state = {
            data: 'wait child to father'
        }
    }
    fatherHandleClick(data){
        this.setState({
            data
        })
    }
    render (){
        
        return <div>
            <Child fatherHandleClick={ this.fatherHandleClick.bind(this) } />
            <h1>{this.state.data}</h1>
        </div>
    }
}
class Child extends Component {
    static defaultProps = {
        fatherHandleClick:()=>{}
    }
    static propTypes = {
        fatherHandleClick: PropTypes.func
    }
    render (){
        const {props} = this
        return <div onClick={ ()=>{
            this.props.fatherHandleClick('child to father')
        } }>
            <h1>This is Child.</h1>
        </div>
    }
}