如何将 React 组件放入打字稿界面？

Question

如果我将“组件”的类型定义为任何类型，则可以：

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { WEB_APP_TOKEN_KEY } from './auth.api';


export interface IAuthRouteProps {
    component: any // React.Component
    path: string
}

const AuthRoute: React.FC<IAuthRouteProps> = (props) => {

    if (!localStorage.getItem(WEB_APP_TOKEN_KEY)) {
        return <Redirect to="/login" />;
    }

    return <Route component={props.component} path={props.path} />;
};

export default AuthRoute;

这就是它的使用方式

 <Switch>
          <Route exact path="/" component={MainPage}/>
          <AuthRoute path="/cars" component={CarPage}/>
 </Switch>

在界面中，我想输入项目“componenten”而不是“any”，而是作为 React 组件。这可能吗？

Answer 1

只需像声明具有所有需要的道具的功能组件一样声明它：

export interface IAuthRouteProps {
    component: React.FC<MainPageProps | CarPageProps>
    path: string
}

如果您不想如此精确地确定所需的组件类型（MainPage 或 CarPage），只需使用不带泛型声明的 React.FC。