代码之家 › 专栏 › 技术社区 › Ross Attrill

如何使用React函数组件处理当前对象

reactjs javascript

Ross Attrill · 技术社区 · 4 年前

this 并将其传递给其他函数,这些函数随后可以在原始组件中执行方法。所以这很有效:

import React, {Component} from 'react'

export default class PrintClass extends Component {

    componentDidMount() {
        executeRequestElsewhere(this)
    }

    print() {
        console.log("called back to class component ...")
    }

    render() {
        return (
            <div>
                Test Calling Method on Me
            </div>
        )
    }
}

function executeRequestElsewhere(caller) {
    caller.print()
}

等价于什么 这 在上面的反应功能组件?是裁判还是我必须用 bind 或者别的什么?

import React, {useEffect} from 'react'

const MyComponent = () => {

    useEffect(() => {
        console.log("Running effect")
        // What do I use for this?
        executeRequestElsewhere2(this)
    }, [])

    const print = () => {
        console.log("please call me :-) ...")
    }

    return (
        <div>
            Function Component
        </div>
    )
}

export default MyComponent

function executeRequestElsewhere2(caller) {
    caller.print()
}

我这样做的原因是我有一个外部函数来管理某些组件的操作执行。

1 回复 | 直到 4 年前

CertainPerformance 4 年前

功能组件没有实例,只是 普通函数 . 对于类组件,与组件关联的函数通常在原型上定义;对于功能组件,与组件关联的函数通常在函数体中内联声明,可能与 useCallback

为了你的案子, print 是在函数体中声明的,因此应将其传递给外部函数以便调用:

 useEffect(() => {
    console.log("Running effect")
    executeRequestElsewhere2(print)
}, [])

和

function executeRequestElsewhere2(print) {
    print()
}

如果要从外部传递多个函数,则可以传递包含所有函数的对象,例如:

executeRequestElsewhere2({ print, someOtherFn1, someOtherFn2 })

function executeRequestElsewhere2(fns) {
    fns.print()
    fns.someOtherFn2()
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前