2017-09-03 9 views
0

私は現在、反応ルータreduxで正しいタイプを渡す際にタイスクリプトの問題を抱えています。リア・ルータ・ドームにコンテナ・コンポーネントを渡すには?

typescriptです-エラー:

severity: 'Error' 
message: 'Type '{ path: "/foo/:id"; component: typeof "<path>..' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'. 
     Type '{ path: "/foo/:id"; component: typeof "<path>..' is not assignable to type 'Readonly<RouteProps>'. 
     Types of property 'component' are incompatible. 
      Type 'typeof "<path>..' is not assignable to type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'. 
      Type 'typeof "<path>..' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'. 
       Type 'typeof "<path>..' provides no match for the signature 'new (props?: RouteComponentProps<any>, context?: any): Component<RouteComponentProps<any>, ComponentState>'.' 

これは私が<Route... />にコンテナコンポーネントを渡しているので、起こっているようです。しかし、mapsToPropsがRouteComponentPropsを返す必要があるため、なぜこれが機能しないのかはわかりません。

Foo.ts(成分):

export interface Props extends RouteComponentProps<any> { 
    a: string; 
} 

export class Foo extends React.Component<Props, void> { 
    public render() { 
     //code 
    } 
} 

FooContainer.ts:

function mapStateToProps(state: State, ownProps: Props): Props { 
    const mappedProps: Props = { 
     foo: "super" 
    }; 

    return mappedProps; 
} 

export default connect(mapStateToProps)(Foo); 

経路:

import * as React from "react"; 
import { Route, Switch } from "react-router-dom"; 
import FooContainer from "./FooContainer"; 
export const routes = (
    <Switch> 
     <Route path="/foo/:id" component={FooContainer} /> 
    </Switch> 
); 

NOMライブラリ/バージョン:

"@types/react": "^16.0.5", 
"@types/react-dom": "^15.5.4", 
"@types/react-redux": "4.4.40", 
"@types/react-router-dom": "4.0.7", 
"@types/react-router-redux": "5.0.8", 
"react": "^15.6.1", 
"react-dom": "^15.6.1", 
"react-redux": "5.0.4", 
"react-router-dom": "4.2.2", 
"react-router-redux": "5.0.0-alpha.6", 
あなたは私の小道具を見れば

、それがあるRouteComponentPropsを拡張します。それが本当であれば

export interface RouteComponentProps<P> { 
    match: match<P>; 
    location: H.Location; 
    history: H.History; 
} 

、mapStateToPropsは試合を含めるべきではないのですか?

答えて

0

だから私はして問題を回避ました:私はReact.ComponentClassと戻り値の型を指定する必要がある理由

export default connect(mapStateToProps)(foo) as React.ComponentClass<any>; 

わかりません。それは暗黙のことではありませんか?

関連する問題