reactjs - 如何为作为道具传入的 React 组件设置类型

Question

我有以下代码，我在其中渲染组件或根据身份验证状态重定向用户。我无法理解应该在我声明的界面中设置的组件道具类型：

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

如您所见，我的界面缺少组件类型。不确定将其设置为什么。

标签： reactjstypescriptreact-typescript

Answer 1

如果要键入组件构造函数，则应使用import {ComponentType} from 'react'.

因此，如果您想使用函数Component中的道具进行构建render，您应该对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

操场