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

步骤分析

1. 在父组件this上先挂载一个child = ref 接收一个参数 ref 子组件传递过来的this
2. <Child onRef={this.onRef} /> 在子组件上用props传递这个函数
3. 子组件接收这个函数返回自己的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 等状态管理工具来实现，组件中的状态管理

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

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据

“如果你不知道是否需要 Redux，那就是不需要它。”

Redux 的创造者 Dan Abramov 又补充了一句。

“只有遇到 React 实在解决不了的问题，你才需要 Redux 。”