react怎么拿组件里的方法

react 调用子（孙）组件方法

在不是用redux的情况下，我们要使用子（孙）组件上的方法，或者属性

调用子组件

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>
        )
    }
//定义一个拿子组件返回值this的函数
    onRef = (ref) => {
        this.child = ref
    }
//调用处理函数
    click = (e) => {
        this.child.myName()
    }
}
class Child extends Component {
    componentDidMount(){
    //通过pros接收父组件传来的方法
        this.props.onRef(this)
    }
    myName = () => alert('子组件fn')
    render() {
        return ('ch')
    }
}

步骤分析

在父组件this上先挂载一个child = ref 接收一个参数 ref 子组件传递过来的this
<Child onRef={this.onRef} /> 在子组件上用props传递这个函数
子组件接收这个函数返回自己的this，如：在生命周期中返回这个this

 componentDidMount(){
    //通过pros接收父组件传来的方法
        this.props.onRef(this)
    }

调用孙组件

我们知道了子组件，那孙组件也就自然而然了，其实就是在子组件上在加一层拿子组件返回值this的函数:<Child onRef={this.onRef} />

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>
        )
    }
//定义一个拿子组件返回值this的函数
    onRef = (ref) => {
        this.child = ref
    }
//调用处理函数
    click = (e) => {
        this.child.childFn()
    }
}
-----------------------华丽的分割线-------------------------------
class Child extends Component {
    componentDidMount(){
    //通过pros接收父组件传来的方法
        this.props.onRef(this)
    }
onRef = (ref) => {
        this.child = ref
    }
    childFn = (e) => {
        this.child.myName()
        
    }
    render() {
        <Child2 onRef={this.onRef}>我是孙组件<Child2>
    }
}
--------------------华丽的分割线-------------------------------
class Child2 extends Component {    componentDidMount(){    //通过pros接收父组件传来的方法        this.props.onRef(this)    }    myName = () => alert('孙组件fn')    render() {        return ('ch')    }}

我们可以看到父组件 => 调用子组件的childFn（） => 调用孙组件的myName（）其实最好真正调用的还是孙组件的函数，只不过是孙组件吧当前的this 传给子组件，子组件再传给父组件

ps：

我们可以看到，在组件中一但跨域比较多的组件，通信起来就比较麻烦，就像以上的那样情况，如果这样的情况多了起来且交叉的数据较多，就会变的特别杂乱，这个时候就推荐使用redux 等状态管理工具来实现，组件中的状态管理

那什么情况下需要用到组件的状态管理呢？