如何解决如何将React组件放入打字稿界面?
如果我将“组件”的类型定义为任何一种,那将起作用:
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组件。有可能吗?
解决方法
只需使用定义所有必需道具的功能组件的方式进行声明即可:
export interface IAuthRouteProps {
component: React.FC<MainPageProps | CarPageProps>
path: string
}
如果您不想精确定义所需的组件类型(MainPage
或CarPage
),只需使用React.FC
而不使用通用声明即可。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。