React父组件如何调用子组件方法，访问子组件State

/**
 * 子组件如何更改父组件的state呢？
 * 父组件传递下来的props不满足要求，往往需要修改
 * 
 * 
 * Author: shujun
 * Date: 2020-10-25
 */

import React from 'react';
import {message} from 'antd';
import 'antd/dist/antd.css';

export default class Father extends React.Component{
    render(){
        
        return 

            
father:
 
            

                在父组件上调用子组件的方法，或者父组件访问子组件的内容？

                1. 给子组件传递一个方法：将子组件整个类全部指向this.sonObj变量

                2. 子组件调用父组件传入的函数，把自身赋给父组件
                3. 父组件中this.sonObj就相当于子组件的this了，this.sonObj.xxx随便调用子组件方法和state
            

            {/* 3. 父组件中this.sonObj调用子组件方法 */}
             {this.sonObj.showSonInfo()}}>
                调用子组件方法
            
            {/* 这么写为什么是错误的呢？难道是this.child.showSonInfo还没加载完成？而箭头函数声明写法只是申明，要等点击时候再触发？ */}
            {/* 调用子组件方法 */}

             
             {message.success("子组件state: "+this.sonObj.state.name)}}>
                show 子组件state
            

            {/* 1. 给子组件传递一个方法：将子组件整个类全部指向this.sonObj变量 */}
            {this.sonObj=son}} />
        
    
    }
    
}


class Son extends React.Component {
    state = {
        "name": "sbjun"
    };

    componentDidMount(){
        // 2. 子组件调用父组件传入的函数，把自身赋给父组件
        this.props.getSonFuncs(this);
    }

    showSonInfo = ()=>{
        message.info("我是子组件Son的方法");
    }

    render(){
        const name = this.state.name;

        return 

            
Son:
 
            
            this.showSonInfo}>子组件事件

            {this.setState({name: e.target.value})}}/>
            state:  name -- {name}
        
    
    }
 }

 

运行效果：

代码git: https://gitee.com/loveCode666/study_react/blob/master/src/react_grammar/special_topics/2InvokerSonFunc.js