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

奥斯卡·雷耶斯（Oscar Reyes）

几周前我才开始使用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} />这对我来说似乎有点模棱两可，这就是为什么我稍微修改了声明以使其变得如此阅读时很容易理解，但是即使执行完全相同的代码（如我在复制此代码的位置处截取的代码），流仍然会抛出该错误。

我做了主旨的这情况下，有人会知道一个解决方案，并希望做出改变，如果没有人能够帮助我在这里解决这个问题，那么我会用这个发送票发行自己的项目要旨

砂

尝试使用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。