React父組件調用子組件的方法

import React, {Component} from 'react';

export default class Parent extends Component {
    render() {
        return(
            <div>
                <Child onRef={this.onRef} />
                <button onClick={this.click} >click</button>
            </div>
        )
    }

    onRef = (ref) => {
        this.child = ref
    }

    click = (e) => {
        this.child.myName()
    }

}

class Child extends Component {
    componentDidMount(){
        this.props.onRef(this)
    }

    myName = () => alert('xiaohesong')

    render() {
        return ('woqu')
    }
}

上面點擊按鈕,會彈出子組件的輸出.其實也很簡單. 就是一個簡單的方法,把子組件的參數回傳到父組件中,並且賦值給子組件的一個實例方法.

有些場景是可能需要公用的,在父組件中統一調用子組件的方法.比如antd的form組件.只有各自子組件可以操作