react-router typescript navigation 0.13.3 - 无法读取属性 'router'

Question

我正在尝试将现有的 React 项目转换为打字稿。除了 react-router 的 Navigation mixin（版本 0.13.3）之外，几乎一切都工作正常。我目前收到一条错误消息，指出 "Cannot read property 'router' of undefined."

我的主页代码目前是这样的：

/// <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 class - 您正在静态访问它，这会导致范围错误。

您应该将代码更改为如下内容：

/// <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 modules？

Answer 2

感谢您的帮助。它可以使用 this.context，但是为了让 TypeScript 编译器满意，我需要创建一个等于 this.context 且类型为 any 的变量。这是渲染方法的样子：

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>
    );
}

react-router typescript navigation 0.13.3 - 无法读取属性 'router'

react-router typescript navigation 0.13.3 - cannot read property 'router'

typescript

reactjs

react-jsx

react-router

typescript1.6

react-router typescript navigation 0.13.3 - 无法读取 属性 'router'

react-router typescript navigation 0.13.3 - cannot read property 'router'

typescript

reactjs

react-jsx

react-router

typescript1.6

react-router typescript navigation 0.13.3 - 无法读取属性 'router'