在箭头函数中调用箭头函数

Question

我的反应项目中的箭头函数有问题。

这门课看起来如下：

f1() { 
// sth...
}

f2 = (a) => () => { /* sth */ }
f3 = (b) => () => {
   this.f1();
   this.f2();
}

为什么没有调用函数f2？F1是可以的，但是f2似乎对上下文有问题吗？如何解决这个问题？我需要在它工作的另一个地方调用相同的函数(F2) (onClick事件)。我想这是一个自动绑定的问题，但我不知道如何解决。请帮帮忙。

Answer 1

您的函数f2确实正在调用，但返回另一个函数。

f2 = (a) => () => { /* sth */ }

这相当于：

f2 = (a) => {
    return () => { /* sth */ }
}

因此，要调用/* sth */，您必须使用以下命令：

f2()()

因为f2()返回第二个函数(内部函数)。

Answer 2

函数f3是一个返回另一个函数的函数，为了调用它，您需要编写如下

f3 = (b) => () => {
   this.f1();
   this.f2();
}

this.f3()()

Answer 3

像这样试试。

  componentWillMount() {
    this.f3(1);
  }

  f1() { 
    console.log('calling f1');
  }

  f2 = (a) => { 
    console.log('calling f2 ' + a);
  }

  f3 = (b) => {
   this.f1();
   this.f2('text');
  }