2016-02-21 5 views
6

TypeScriptでcontextTypesをどのように定義しますか?ReactコンポーネントのcontextTypesをTypeScriptで定義する正しい方法は何ですか?

私は、コンポーネントを持っている(注記:this questionで詳述それがここでを無関係でなければなりませんように私は、ルータの必要な種類がわからないよ)

export class Repos extends React.Component<ReposProps, {}> { 
    context: { 
     router: History 
    } 

    static contextTypes = { 
     router: React.PropTypes.object 
    }; 

は、それが機能を持っている

public handleSubmit(event: React.FormEvent) { 

この関数の最後には、コンテキストを呼び出します。

この同じコードをコンパイルするとき、私は活字体のエラーを受け取った:「プロパティを読み取ることができません 『ルータ』未定義のキャッチされない例外TypeError」

コンポーネントがthis.context.router.push(path);とラインで、私はエラーを受け取り、

public render() { 
     return (
      {/* ... */} 
       <form onSubmit={this.handleSubmit}> 
     ); 
    } 
} 

しかしフォームを持っていますルータにレポを使用するファイル:

ERROR in ./index.tsx 
(14,34): error TS2322: Type 'typeof Repos' is not assignable to type 'string | ComponentClass<any> | StatelessComponent< 
any>'. 
    Type 'typeof Repos' is not assignable to type 'StatelessComponent<any>'. 
    Types of property 'contextTypes' are incompatible. 
     Type '{ router: Requireable<any>; }' is not assignable to type 'ValidationMap<any>'. 

static contextTypes: React.ValidationMap<any> = { 
    router: React.PropTypes.object 
}; 

にcontextTypesを変更するには、TypeScripを固定しました私はそれが必要だとは思っていませんでした。私はこれらの問題の両方の原因である別の問題を疑う。

TypeScript issue 4785: How to use React contextTypes in Typescript 1.6?での議論によれば、上記のコードは正しいです。役立つなら、TypeScript 1.7.3、React 0.14.7、そしてreact-router 2.0.0を使用しています。

+0

私はコードを共有しています。私は個人的にはまだ 'context'や' router'を使っていません:) – basarat

+0

[物事が壊れている特定のコミットへのリンク](https://github.com/mjohnsonengr/react-router-typescript-tutorial/tree/ 744e90c18edffcc36beecdaf87b2dbf47a783401) - これはTypeScript 1.7.3でコンパイルされましたが、私は1.8.2が壊れていることに気付きました。 w/npm startを実行し、localhost:8080/reposに移動し、2つのテキストフィールドに入力してGoを押すと、Router undefined error happenが表示されます。 – mjohnsonengr

+0

私はTS 1.8.2コンパイルの問題の一時的な修正でそのレポを更新しました。 – mjohnsonengr

答えて

3

私たちはすべてこの問題を私たちのキャリアの中で見たことがあります。私がこれをキャッチしなかったのは驚くべきことです。

handleSubmitが呼び出されているためthisの文脈がhandleSubmit()と異なる問題があります。脂肪の矢印の定義にhandleSubmitを変更すると、動作します:

public handleSubmit = (event: React.FormEvent) => { 

は、この特定のケースでは、私は活字の世界で、多くの場合、この問題が発生していないので(私も、多くの場合、DOM要素では動作しないことを見落とし、 1週間以内にReactにいたのですが... 言い訳はありません

関連する問題