response-router typescript navigation 0.13.3 - невозможно прочитать свойство 'router'

Question

Я пытаюсь преобразовать существующий проект реакции в машинопись. Почти все работает нормально, за исключением навигационного микширования для реактивного маршрутизатора (версия 0.13.3). В настоящее время я получаю сообщение об ошибке «Невозможно прочитать свойство« router »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

Благодарим за помощь. Он работал, чтобы использовать this.context, однако для того, чтобы сделать компилятор TypeScript счастливым, мне нужно было создать переменную, которая была равна this.context с типом любого. Вот что делают метод выглядел так:

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

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

This, кажется, очень похожий вопрос, но для чистого JavaScript.

BTW Почему вы используете старые модули TypeScript вместо ES6 modules, поддерживаемые в TS 1.6?