我有以下代碼，我正在根據身份驗證狀態呈現組件或重定向用戶。我無法理解在我宣告的介面中應該將組件 prop 型別設定為什么：
import { useState } from 'react';
import { Redirect, Route } from 'react-router-dom';
import { useAuthState } from '../../../context/authenticationContext';
interface AppProps {
path: string,
isPrivate: boolean,
}
const AppRoutes = ({ component: Component, path, isPrivate, ...rest }: AppProps) => {
const authDetails = useAuthState();
...
return (
<Route
path={path}
render={props => (isPrivate && !authDetails.user) ? (
<Redirect
to={{ pathname: "/" }}
/>
) : (
<Component {...props} />
)
}
{...rest}
/>
)
}
export default AppRoutes
如您所見，我的界面缺少組件型別。不知道把它設定成什么。
uj5u.com熱心網友回復：
如果要鍵入組件建構式，則應使用import {ComponentType} from 'react'.
所以，如果你想Component用render函式中的props構建，你應該對ComponentTypeProps.
換句話說，您Component應該期望Route['render']引數型別。為了獲得render引數的型別，您應該使用ComponentProps實用程式，您可以從“react”匯入。
考慮這個例子：
type RenderProps = Parameters<NonNullable<ComponentProps<typeof Route>['render']>>[0]
現在您可以使用適當的約束：
import React, { ComponentType, ComponentProps } from 'react';
import { Route } from 'react-router-dom';
interface AppProps {
path: string,
isPrivate: boolean,
Component: ComponentType<RenderProps>
}
type RenderProps = Parameters<NonNullable<ComponentProps<typeof Route>['render']>>[0]
const AppRoutes = ({ Component, path, isPrivate, ...rest }: AppProps) => {
return (
<Route
path={path}
render={props => <Component {...props} />}
{...rest}
/>
)
}
export default AppRoutes
操場
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338462.html