如何为作为 prop 传入的 React 组件设置类型答案

【问题标题】：How to set a type for a React Compnent being passed in as a prop如何为作为 prop 传入的 React 组件设置类型
【发布时间】：2021-12-12 14:16:55
【问题描述】：

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

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

如您所见，我的界面缺少组件类型。不知道要设置什么。

【问题讨论】：

标签： reactjs typescript react-typescript

【解决方案1】：

如果你想键入组件构造函数，你应该使用import {ComponentType} from 'react'。

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

Playground

【讨论】：