流React：无法创建元素，因为React.Component [1]不是React组件

Question

几周前我才开始使用flow，从一周前开始，我就收到了流错误，但我不知道如何解决。

代码如下：

// @flow

import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";
import CookieStorage from "./../services/CookieStorage";
import type { Component as ComponentType } from "react";

type Props = {
    component: ComponentType<any, any>
}

class ProtectedRoute extends Component<Props> {
    render() {
        const isAuthenticated     = this.isAuthenticated();
        const {...props}          = this.props;
        const AuthorizedComponent = this.props.component;

        return (
            <Route
                {...props}
                render={props => (
                    isAuthenticated ?
                        <AuthorizedComponent {...props} /> :
                        <Redirect to="/"/>
                )}
            />
        );
    }

    isAuthenticated(): boolean {
        const data = CookieStorage.get("foobar");

        return data !== null;
    }
}

export default ProtectedRoute;

在这里流程抛出此错误：

Error:(23, 8) Cannot create `AuthorizedComponent` element because `React.Component` [1] is not a React component.

我不知道在身份验证示例正常时要为要呈现的组件执行错误的导入类型或错误的类型声明。

我已经从一个我不记得在哪里的网站上复制了此代码，但是他正在使用此片段，const {component: Component} = this.props并对其进行渲染，因为<Component {...props} />这对我来说似乎有点模棱两可，这就是为什么我稍微修改了声明以使其变得如此阅读时很容易理解，但即使执行完全相同的代码（如我在复制此代码的位置处截取的代码），流仍然会抛出该错误。

如果有人知道解决方案并希望进行更改，我已经做出了要旨，如果没有人能够在这里帮助我解决此问题，那么我将使用此将票务问题发送给他们的项目要旨

Answer 1

尝试使用React.ComponentType代替吗？

import type { ComponentType } from "react";

import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";
import CookieStorage from "./../services/CookieStorage";

type Props = {
  component: ComponentType<any>
}

class ProtectedRoute extends Component<Props> {
  render() {
    const isAuthenticated = this.isAuthenticated();
    const { component: AuthorizedComponent, ...props } = this.props;

    return (
      <Route
        {...props}
        render={props => (
        isAuthenticated ?
          <AuthorizedComponent {...props} /> :
          <Redirect to="/"/>
        )}
      />
    );
  }

  isAuthenticated(): boolean {
    const data = CookieStorage.get("foobar");
    return data !== null;
  }
}

export default ProtectedRoute;

参见https://flow.org/en/docs/react/types/#toc-react-componenttype