React.ComponentはReactTypeではありません

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のどちらかが型か空のオブジェクトの場合にのみ満たされます。それらはanyに設定することはできません。

編集に細心の注意を払った後、私はこの問題が国家や小道具のタイプ以上のものかもしれないと思います。

エクスポートのデフォルトを使用していないため、実際にキーとその値がコンポーネントである値をエクスポートしています。リアクタはコンポーネントを期待していますが、あなたはそのキーだけを渡しています。問題を解決するにはデフォルトを使用するか、import {component}構文を使用します。

Answer 2

私はそれを働かせました。問題は、私がどのように輸出をしているかにありました。私はimport * as OverviewPage from './OverviewPage';を実行して何らかのオブジェクトをインポートしていたと思います。

代わりにexport default class OverviewPageを入力し、クラスをimport OverviewPage from './OverviewPage';としてインポートする必要があります。私がそれをした後、それは苦情なしで働き始めた。