react-router打字稿導航0.13.3-無法讀取屬性'router'

Question

我正在嘗試將現有的React項目轉換為TypeScript。 除了react-router的Navigation mixin（版本0.13.3）之外，幾乎所有的東西都工作正常。 我目前收到一條錯誤消息，指出“無法讀取未定義的屬性'router'”。

我的主頁代碼當前如下所示：

/// <reference path="../typings/react/react.d.ts" />
/// <reference path="../typings/react-router/react-router.d.ts" />

import React = require('react');
import ReactRouter = require('react-router');
import Header = require('./common/header.tsx');
var Navigation = ReactRouter.Navigation;

class Home extends React.Component<{}, {}> {
    static contextTypes: React.ValidationMap<any> = {
        router: React.PropTypes.func.isRequired
    };

    render(): JSX.Element {
        return (
            <div>
                <Header.Header MenuItems={[]}/>
                <div className="jumbotron">
                    <h1>Utility</h1>
                    <p>Click on one of the options below to get started...</p>
                    <a className="btn btn-lg" onClick={() => Navigation.transitionTo('Route1')}>Route1</a>
                    <a className="btn btn-lg" onClick={() => Navigation.transitionTo('Route2')}>Route2</a>
                    </div>
                </div>
        );
    }
}

export = Home;

Answer 1

ReactRouter.Navigation是一個mixin類-您正在靜態訪問它，這會導致錯誤的作用域。

您應該將代碼更改為以下內容：

/// <reference path="../typings/react/react.d.ts" />
/// <reference path="../typings/react-router/react-router.d.ts" />

import React = require('react');
import ReactRouter = require('react-router');
import Header = require('./common/header.tsx');
var Navigation = ReactRouter.Navigation;

class Home extends React.Component<{}, {}> {
    static contextTypes: React.ValidationMap<any> = {
        router: React.PropTypes.func.isRequired
    };

    render(): JSX.Element {
        return (
            <div>
                <Header.Header MenuItems={[]}/>
                <div className="jumbotron">
                    <h1>Utility</h1>
                    <p>Click on one of the options below to get started...</p>
                    <a className="btn btn-lg" onClick={() => (<any>this.context).router.transitionTo('Route1')}>Route1</a>
                    <a className="btn btn-lg" onClick={() => (<any>this.context).router.transitionTo('Route2')}>Route2</a>
                    </div>
                </div>
        );
    }
}

export = Home;

這似乎是非常相似的問題，但對於純JavaScript。

順便說一句，為什么您使用舊的TypeScript模塊而不是TS 1.6支持的ES6模塊 ？

Answer 2

謝謝你的幫助。 它使用了this.context，但是為了使TypeScript編譯器滿意，我需要創建一個與this.context相等且類型為any的變量。 這是render方法的樣子：

render(): JSX.Element {
    var myContext: any = this.context;
    return (
        <div>
            <Header.Header MenuItems={[]}/>
            <div className="jumbotron">
                <h1>Utility</h1>
                <p>Click on one of the options below to get started...</p>
                <a className="btn btn-lg" onClick={() => myContext.router.transitionTo('remoteaccess') }>Remote Access</a>
                <a className="btn btn-lg" onClick={() => myContext.router.transitionTo('bridge') }>Bridge</a>
            </div>
        </div>
    );
}