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

Question

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

代码如下：

// @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.

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

我从一个我不记得在哪里的网站上复制了这段代码，但他正在使用这个 sn-p 使用 const {component: Component} = this.props 并将其呈现为 <Component {...props} /> 这对我来说似乎有点模棱两可，这这就是为什么我稍微更改了声明以使其在阅读时易于理解，但即使执行与我复制此代码的片段完全相同的代码，flow 仍然会引发该错误。

我已经为此创建了一个gist，以防有人知道此问题的解决方案并想进行更改，如果没有人能够在这里帮助我解决此问题，那么我将发送票证问题使用这个要点到他们的项目

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