Question

我的React项目中的箭头功能有问题。

该课程如下：

f1() { 
// sth...
}

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

为什么没有调用函数f2？ F1还可以，但f2似乎有上下文问题？怎么解决？我需要在其工作的另一个地方调用相同的函数（f2）（onClick事件）。我猜这个＆＃39;这个＆＃39;这是自动绑定但我不知道如何解决它。请帮忙。

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');
  }

Answer 4

正如@Jonas W.和@Seblor所建议的，您正在创建返回函数的函数。而是使用以下语法：

f1() { 
// sth...
}

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

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

4 个答案: