typescript - react 路由器 typescript 导航 0.13.3 - 无法读取属性 'router'

Question

我正在尝试将现有的 React 项目转换为 typescript 。除了 react-router 的 Navigation mixin(版本 0.13.3)之外，几乎一切都工作正常。我目前收到一条错误消息，指出“无法读取未定义的属性‘路由器’。”

我的主页代码目前如下所示:

/// <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 是一个混合类 - 您正在静态访问它，这会导致错误的范围。

你应该把你的代码改成这样:

/// <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;

This似乎是非常相似的问题，但对于纯 JavaScript。

顺便说一句，你为什么使用旧的 TypeScript 模块而不是 ES6 modules TS 1.6 支持吗？