javascript - react | TypeScript - "this"onClick 事件的上下文

Question

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

以下 React 功能组件调用并相应地执行我的 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 错误:包含的箭头函数捕获隐含类型为“any”的“this”的全局值

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

但是，我找不到解决这个问题的方法(双关语:)

更新:根据下面的一些评论，我将代码重构为:

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 是一个函数。