React 父组件调用子组件方法

react 组件通讯

react 是单向数据流的，数据通过props由父组件向子组件传递。
常见的传值方式如下所示：

• 父组件向子组件传值，可以直接通过 props 传递。
• 子组件向父组件传值，可以调用父组件props传过来的函数，函数体接收子组件的值，再由父组件进行对值的操作。

父组件调用子组件

在react中有时候为了实现某些更“优雅”的操作，需要在父组件中调用子组件的方法。
比如，当你实现一个弹窗时，你需要从父组件把控制弹窗显示关闭的值传给子组件，同时，还要把控制弹窗关闭的方法传给子组件。这样写，看着就很糟糕！！！
实现方法：
父组件可以通过props把onRef方法传递给子组件调用，那么子组件通过这个函数把自己的组件实例传回给父组件，父组件只需要保存子组件实例便可以调用子组件的方法
子组件：
在子组件中调用父组件传过来的onRef 方法，把this传给父组件

import React from 'react'
import {Modal} from 'antd'

export default class Child extends React.Component {
	state = {
        visible: false
    }
    componentDidMount(){
        this.props.onRef(this)
    }
    visibleToggle = () => {
        this.setState({
            visible: !this.state.visible
        })
    }
    render() {
        return (
            <Modal
                title="我是弹窗"
                visible={this.state.visible}
                onCancel={this.visibleToggle}
            >
            </modal>
        )
    }
}

父组件：
在父组件中，接收子组件传过来的this，并赋值给this.child,这样，Parent组件就能愉快的调用Child组件的方法了

import React from 'react';
 
export default class Parent extends React.Component {
    onChildShow = () => {
        this.child.visibleToggle()
    }
    render() {
        return(
            <div>
                <Child onRef={ref => this.child = ref} />
                <button onClick={this.onChildShow} >click</button>
            </div>
        )
    }
}