react父组件调用子组件的方法

前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解.

其实今天说的这个 父组件直接调用子组件方法, 也类似.

先看代码,比较直观.

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')

    }

}

上面点击按钮,会弹出子组件的输出.其实也很简单. 就是一个简单的方法,把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法.