Question

我正在尝试将现有的反应项目转换为打字稿。除了用于react-router（版本0.13.3）的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={() => 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;

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

BTW为什么你使用旧的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'

2 个答案: