Question

我正在使用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 }

Answer 1

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

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

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

Answer 2

我得到了它的工作。问题出在我的出口方式上。我想我是通过import * as OverviewPage from './OverviewPage';来导入某种对象的。

相反，我应该export default class OverviewPage并将该类导入为import OverviewPage from './OverviewPage';。一旦我这样做，它开始工作没有抱怨。

React.Component不是ReactType

2 个答案: