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 等状态管理工具来实现,组件中的状态管理

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

用户的使用方式复杂

不同身份的用户有不同的使用方式(比如普通用户和管理员)

多个用户之间可以协作

与服务器大量交互,或者使用了WebSocket

View要从多个来源获取数据

"如果你不知道是否需要 Redux,那就是不需要它。"

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

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

更多相关技术文章,请访问HTML中文网

以上就是react怎么拿组件里的方法的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏