react-父组件调子组件方法

/**
 * 1.子组件 child.js
 */

import React, { Component } from 'react'

export default class Child extends Component {
    constructor(props) {
        super(props)
        this.state = {}

        //如果父组件传来该方法 则调用方法将子组件this指针传过去
        if (props.onRef) {
            props.onRef(this)
        }
    }
    editRowEvt = (row) => {
        console.log('父组件调用子组件方法', row)
    }
}



/**
 * 2.父组件 parent.js
 */

import React, { Component } from 'react'
import ChildPage from './child'

export default class Parent extends Component {
    clickFn() {
        if (this.ChildPage) {
            this.ChildPage.editRowEvt('调用子组件的 editRowEvt 方法')
        }
    }
    render() {
        return (
            <div>
                <div onClick={this.clickFn}>点击</div>

                {/* // 把子组件的this指针挂载成父组件的一个变量 */}
                <ChildPage onRef={c => this.ChildPage = c}></ChildPage>
            </div>
        )
    }
}