反应 | TypeScript - “this” onClick 事件的上下文

Question

在下面的上下文中，分配this 的正确方法是什么？

以下反应功能组件调用并相应地执行我的append() 方法。

export const Guess: React.SFC<{}> = () => {
  const hero = "Spider";
  const animal = "Spider";

  function append() {
    return hero === animal ? "yes" : "no";
  };
  return <p>Are they similar? {append()}</p>;
};

但是，当尝试调用方法onClick，并将函数修改为：

export const Guess: React.SFC<{}> = () => {
  const hero = "Spider";
  const animal = "Spider";

  const append = () => () => {
    return hero === animal ? "yes" : "no";
  };

  return <p onClick={this.append()}>Are they similar? </p>;
};

我收到一个 TS 错误： The containing arrow function captures the global value of 'this' which implicitly has type 'any'

我读到箭头函数没有词法上下文，因此在箭头主体内对this 的任何调用都会退化为其在外部范围内的值。

但是，我无法找到解决方案（双关语：）

更新：基于下面的一些 cmets，我将代码重构为：

export const Guess: React.SFC<{}> = () => {
  const hero = "Spider";
  const animal = "Spider";

  function append() {
    console.log(hero === animal);
    return hero === animal ? 'yes' : 'no';
  }

  return <p onClick={append}>Are they similar? </p>;
};

Answer 1

修复

export const Guess: React.SFC<{}> = () => {
  const hero = "Spider";
  const animal = "Spider";

  const append = () => () => {
    return hero === animal ? "yes" : "no";
  };

  return <p onClick={this.append()}>Are they similar? </p>;
};

应该是：

export const Guess: React.SFC<{}> = () => {
  const hero = "Spider";
  const animal = "Spider";

  const append = () => () => {
    return hero === animal ? "yes" : "no";
  };

  return <p onClick={append}>Are they similar? </p>;
};

更多

简化：this 用于类。你有一个功能。您不需要使用this，因为您没有实例。

onClick 也有一个函数。表达式append() 不是函数。表达式append 是一个函数。