React.Component 不是 ReactType答案

【问题标题】：React.Component not a ReactTypeReact.Component 不是 ReactType
【发布时间】：2017-09-12 09:24:20
【问题描述】：

我正在使用 Typescript 构建一个 React 应用程序，并且对于我试图包含在我的路由器中的每个组件，我都收到以下错误。

ERROR in [at-loader] ./src/scripts/components/AppRouter.tsx:14:25
    TS2322: Type 'typeof "E:/Programming Projects/free-food-app/src/scripts/components/OverviewPage"' is not assignable to type 'ReactType'.
  Type 'typeof "E:/Programming Projects/free-food-app/src/scripts/components/OverviewPage"' is not assignable to type 'StatelessComponent<any>'.
    Type 'typeof "E:/Programming Projects/free-food-app/src/scripts/components/OverviewPage"' provides no match for the signature '(props: any, context?: any): ReactElement<any>'

我完全不明白。似乎扩展 React.Component 的类应该能够包含在路由器中。为什么会出现这些错误？

AppRouter.tsx：

import * as React from 'react';
import { Router, Route, hashHistory } from 'react-router';
import * as OverviewPage from './OverviewPage';
import * as AssignmentViewPage from './AssignmentViewPage';
import * as SubmissionEditPage from './SubmissionEditPage';
import * as SubmissionSubmitPage from './SubmissionSubmitPage';
import * as SubmissionViewPage from './SubmissionViewPage';

export default class AppRouter extends React.Component<any, any> {

  public render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={OverviewPage}/>
        <Route path="/assingment" component={AssignmentViewPage}/>
        <Route path="/submission/edit" component={SubmissionEditPage}/>
        <Route path="/submission/submit" component={SubmissionSubmitPage}/>
        <Route path="/submission/" component={SubmissionViewPage}/>
      </Router>
    );
  }
}

编辑：OverviewPage.tsx

import * as React from 'react';

class OverviewPage extends React.Component<any, any> {
  public render() {
    return (
      <div>
        <p>Overview</p>
      </div>
    );
  }
}

export { OverviewPage }

【问题讨论】：

你传递给路由器的每个组件的 props 和 state 的类型是什么？
你能发布你的一个组件（OverviewPage）吗？您的导入看起来很奇怪，为什么您将全部导入为 * ？
@soywod 我开始导入为import OverviewPage from './OverviewPage';。它将错误消息更改为：TS2322: Type '{ OverviewPage: typeof OverviewPage; }' is not assignable to type 'ReactType'. Object literal may only specify known properties, and 'OverviewPage' does not exist in type 'ReactType'.
@promisified 我编辑了问题以添加我要传递给路由器的组件。
回答导入问题。由于您没有使用导出默认值，因此您的导入应使用括号语法。导入 {component}。

标签： reactjs typescript react-router

【解决方案1】：

我遇到了这个确切的问题，我发现的是这个。仅当 props 和 state 具有类型或为空对象时，才满足 React 路由器。它们不能设置为任何值。

在仔细关注您的编辑后，我认为问题可能不仅仅是状态和道具的类型。

由于您没有使用导出默认值，因此您实际上是在导出一个键和一个值，其中值是您的组件。 React 路由器需要一个组件，但您只传递密钥。您可以使用 default 来解决您的问题，也可以使用 import {component} 语法。

【讨论】：

【解决方案2】：

我让它工作了。问题在于我是如何进行出口的。我想我正在通过 import * as OverviewPage from './OverviewPage'; 导入某种对象。

相反，我应该export default class OverviewPage 并将类导入为import OverviewPage from './OverviewPage';。一旦我这样做了，它就开始毫无怨言地工作。

【讨论】：