2

我正在尝试将现有的反应项目转换为打字稿。除了 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;
4

2 回答 2

2

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 模块？

于 2015-09-26T14:39:46.930 回答
1

谢谢你的帮助。它可以使用 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>
    );
}
于 2015-10-05T12:06:21.567 回答