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.

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

我已经从一个我不记得在哪里的网站上复制了此代码，但是他使用const {component: Component} = this.props来使用此代码段并将其呈现为<Component {...props} />，这对我来说似乎有点模棱两可，这就是为什么我稍稍更改了声明以使其易于阅读时的原因，但即使仍然执行完全相同的代码，例如在复制此代码时所截取的代码，流程仍然会抛出该错误。

我对此做了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

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

1 个答案: