Блог

Главная - Вопросы по программированию - Как описать интерфейс TS для history.GoBack в React?

Как описать интерфейс TS для history.GoBack в React?

#reactjs #typescript

Вопрос:

Не могли бы вы помочь мне, пожалуйста, ввести history.GoBack в React? На данный момент я использую любой тип, но я думаю, что это неправильный способ.

Main.tsx

 ...
<Route path={PAGE_404} component={Page404} />

Страница 404.tsx

 const Page404: React.FC<RouteComponentProps> = ({ history }) => {
  return (
    <section className={styles.section}>
      <GoBackLink text={'Назад'} onGoBackClick={() => history.goBack()} />
          ...
      </div>
    </section>
  );
};

export default Page404;

GoBackLink.tsx с интерфейсом и введите любой для ключа onGoBackClick

 interface IGoBackLinkProps {
  text: string;
  onGoBackClick: any;
}

const GoBackLink: React.FC<IGoBackLinkProps> = ({ text, onGoBackClick }) => {
  return (
    <Link className={styles.link} to='/' onClick={onGoBackClick}>
      {text}
    </Link>
  );
};

export default GoBackLink;

Ответ №1:

Вы можете использовать onGoBackClick: () => void или onGoBackClick: Function

Комментарии:

1. Большое спасибо. Только один question…is это лучшая практика для таких случаев?

2. используйте Function с вами, не передавайте в него параметры. () => void если вы хотите пройти

Ответ №2:

 interface IGoBackLinkProps {
  text: string;
  onGoBackClick(): void;
}

…если вам не нужны никакие параметры и вас не волнует возвращаемое значение в этой функции обратного вызова.

Метки: