#reactjs #typescript #react-typescript
Вопрос:
У меня проблема с настройкой типа реквизита.
export default function PrivateRoute({component: Component, ...rest}) {
const {currentUser} = useAuth();
return (
<Route
{...rest}
render={(props) => {
return currentUser ? <Component {...props} /> : <Redirect to="/" />;
}}
></Route>
);
}
Я сделал простой Частный маршрут, который в компоненте переименован в компонент с большой буквы C. Но я также хочу установить тип этого компонента для компонента React, как я могу этого добиться? Спасибо.
Ответ №1:
Вы указываете тип объекта, который вы разрушаете. Например, если Component
FunctionComponent<PropsType> | ComponentClass<PropsType>
да , то общий объект может быть {component: FunctionComponent<PropsType> | ComponentClass<PropsType>}
:
export default function PrivateRoute<PropsType extends object>(
{component: Component, ...rest}: {component: FunctionComponent<PropsType> | ComponentClass<PropsType>}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// destructuring type of object
) {
const {currentUser} = useAuth();
return (
<Route
{...rest}
render={(props: PropsType) => {
// Note −−−−−−−−−−−−−−−−−−^^^^^^^^^^^
return currentUser
? <Component {...props} />
: <Redirect to="/" />;
}}
></Route>
);
}
Там я использовал параметр типа ( PropsType
), но если у вас есть конкретный тип, который вы можете использовать вместо него, используйте его.