Реагировать | TypeScript - контекст события «this» onClick. - PullRequest
Новая
       14

Реагировать | TypeScript - контекст события «this» onClick.

0 голосов
/ 16 января 2019

В контексте ниже, какой будет правильный способ присвоения 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'

Я читал, что функции Arrow не имеют лексического контекста, поэтому любой вызов 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>;
};

1 Ответ

0 голосов
/ 16 января 2019

Fix 

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 является функцией .

...