Question

我有一个函数，它位于我的一个React组件中，它开始变得有点长。我决定将它保存在一个单独的文件中，以保持我的组件更整洁。问题是组件必须引用this才能获得通过Redux映射到props的函数和状态。以下是我在我的组件中调用它的方式：

import {myFunction} from './functions/myFunction';

handleMyFunction(event) {
    myFunction(event).bind(this)
}

componentDidMount() {
    this.handleMyFunction()
}

以下是＆＃39; ./ functions / myFunction＆＃39;中的函数本身：

export const captureSnapshot = (event) => {
    console.log(this.props.someState)
}

我原以为绑定this会使所有道具在导入的函数中可用，但我得到：

无法阅读属性＆＃39;道具＆＃39;未定义的

当我尝试运行该功能时。我怎样才能通过＆＃34;这个＆＃34;功能正常吗？

Answer 1

您无法在函数执行中使用bind

此行错误

myFunction(event).bind(this)

而是使用apply或call

示例myFunction.call(this , event)或myFunction.apply(this , [event])

您可以详细了解＆＃39; bind＆＃39;，＆＃39; call＆＃39;和＆＃39; apply＆＃39;之间的区别在此answer

另外还有一项修改，您可能会将此功能handleMyFunction与this上下文设置错误，因此请将其更改为

handleMyFunction = (event) => {
    myFunction.call(this , event)
}

在导入的函数中访问this.props

1 个答案: