React 父组件调用子组件

子组件如果引入mapStateToProps，mapDispatchToProps调用store里的属性，则父组件不可以直接通过ref调用子组件方法（即：ref={(ref) => { this.XXX= ref; }}），请知悉。

一：子组件未调用store属性

import React, {Component} from 'react';

export default class Parent extends Component {

   childHandle= () => {
        this.XXX.myName()
    }
    render() {
        return(
            <div>
                <Child ref={(ref) => { this.XXX= ref; }} />
                <button onClick={this.childHandle} >
            </div>
        )
    }

}

export default class Child extends Component {
    componentDidMount(){}

     myName = () =>{
       console.log(‘我是子组件的方法’)
     }

    render() {
        return (<div>子组件</div>)
    }
}

二：子组件调用store属性，需抛出子组件的this

import React, {Component} from 'react';

export default class Parent extends Component {

   childHandle= () => {
        this.XXX.myName()
    }
    render() {
        return(
            <div>
                <Child triggerRef={(ref) => {this.XXX= ref;}} />
                <button onClick={this.childHandle} >
            </div>
        )
    }

}

export default class Child extends Component {
    componentDidMount(){
        this.props.triggerRef(this)
    }

     myName = () =>{
       console.log(‘我是子组件的方法’)
     }

    render() {
        return (<div>子组件</div>)
    }
}