当我使用React类组件时，我可以轻松地获得当前对象的句柄，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()
}
this对于React函数组件，上述内容等效于什么？是参考还是我必须使用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()
}
我这样做的原因是我有一个外部功能来管理某些组件的动作执行。
功能组件没有实例，而只是普通函数。对于类组件，通常在原型上定义与该组件关联的功能。对于功能组件，通常在函数体中内联声明与该组件关联的功能，也许与结合使用useCallback。
对于您的情况，print在函数体中进行了声明，因此应将其传递给外部函数以进行调用：
useEffect(() => {
console.log("Running effect")
executeRequestElsewhere2(print)
}, [])
和
function executeRequestElsewhere2(print) {
print()
}
如果您有多个要从外部传递的函数，则可以传递包含所有函数的对象，例如：
executeRequestElsewhere2({ print, someOtherFn1, someOtherFn2 })
function executeRequestElsewhere2(fns) {
fns.print()
fns.someOtherFn2()
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句