Функция TypeScript, которая условно возвращает маршрут реакции-маршрутизатора - PullRequest
Новая
       5

Функция TypeScript, которая условно возвращает маршрут реакции-маршрутизатора

0 голосов
/ 18 октября 2019

У меня есть функция TypeScript, которая при вызове возвращает маршрут react-router-dom на основе условно предоставленного параметра. Однако, когда я объявляю тип возвращаемого значения (Route | null), я получаю следующую ошибку:

TS2740: Типу «Элемент» не хватает следующих свойств из типа «Маршрут»: context, setState, forceUpdate, render и еще 2.

Не правильно ли я объявил тип возвращаемого значения для этой функции, и если да, то каким он должен быть? Я также попробовал (Route<RouteProps> | null), но это, похоже, не решило проблему. Спасибо. 

import * as React from 'react';
import { Route } from 'react-router-dom';

const SampleComponent: React.FC = () => <h1>hello world</h1>;

export const getRoute = (returnRoute: boolean): (Route | null) => {
  if (returnRoute) {
    return (
      <Route
        component={SampleComponent}
        exact
        path="/samplePath"
      />
    );
  }
  return null;
};

enter image description here

1 Ответ

1 голос
/ 18 октября 2019

Если вы посмотрите на подпись Route .. 

export class Route<T extends RouteProps = RouteProps> extends React.Component<T, any> { }

, вы увидите, что это просто класс. В ответ вы говорите, что возвращаете экземпляр этого класса (то есть new Route(props)) или null, а не компонент этого класса (ReactNode). Это та же идея, как если бы у вас была функция, которая возвращает React.Component

. React.ReactNode - это в основном набор допустимых возвращаемых значений для компонентов React: 

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Таким образом, чтобы ответить на ваш вопрос, вы можете заменить (Route | null) на React.ReactNode.

...