Неопределенная/нулевая ссылка при попытке добавить ReactCSSTransitionGroup (TypeScript + React + JSPM)

Question

Я новичок в React и пытаюсь добавить очень простую анимацию на тестовую страницу, чтобы проверить, что я понимаю, какие процессы ... к сожалению Я не.

Я установил от того, что я думаю, являются правильными типизации, выписка из автоматически сгенерированных типизации> index.d.ts файл:

/// <reference path="globals/react/index.d.ts" /> /// <reference path="globals/react-addons-css-transition-group/index.d.ts" />

файл конфигурации JSPM я настройки с правильной записью, так как нет проблем при использовании React без каких-либо анимаций; раздел карта содержит следующую запись:

"react": "npm:react@15.1.0\\dist\\react-with-addons"

index.tsx файл очень простой, состоящий из (игнорируйте запуска фрагмент кода, по какой-то причине я не мог использовать кавычку, чтобы вставить многострочный коды ниже):

/// <reference path="../typings/index.d.ts" /> 
 
import * as React from 'react'; 
 
import * as ReactDOM from 'react-dom'; 
 

 
let ReactCSSTransitionGroup = React.__Addons.CSSTransitionGroup; 
 

 
ReactDOM.render(<div><ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500}> 
 
<h1 key="helloKey">Hello</h1> 
 
</ReactCSSTransitionGroup></div>, document.getElementById('app'));

Использование машинописи компилятор производит следующий вывод для index.js:

System.register(['react', 'react-dom'], function(exports_1, context_1) { 
 
    "use strict"; 
 
    var __moduleName = context_1 && context_1.id; 
 
    var React, ReactDOM; 
 
    var ReactCSSTransitionGroup; 
 
    return { 
 
     setters:[ 
 
      function (React_1) { 
 
       React = React_1; 
 
      }, 
 
      function (ReactDOM_1) { 
 
       ReactDOM = ReactDOM_1; 
 
      }], 
 
     execute: function() { 
 
      ReactCSSTransitionGroup = React.__Addons.CSSTransitionGroup; 
 
      ReactDOM.render(React.createElement("div", null, React.createElement(ReactCSSTransitionGroup, {transitionName: "example", transitionEnterTimeout: 500}, React.createElement("h1", {key: "helloKey"}, "Hello"))), document.getElementById('app')); 
 
     } 
 
    } 
 
});

При попытке загрузить файл с помощью выше JavaScript я получаю следующее сообщение об ошибке:

TypeError: Unable to get property 'CSSTransitionGroup' of undefined or null reference at execute (eval code:15:13) Error loading http://localhost:8000/index.js

Когда я удалить все ссылки анимации, то все работает, как ожидалось.

Я уверен, что совершил очень простую ошибку, но я потратил часы, пытаясь выяснить причину, но не преуспел. Обратите внимание, что я искал в StackOverflow, Google и Bing для получения помощи, но, как ни странно, я не могу найти ничего подобного.

Любая помощь будет принята с благодарностью,

С наилучшими пожеланиями,

Джон

Answer 1

Спасибо за ответ , Мне удалось получить эту работу, добавив реагируют, глобальные и реагирующие-аддонов-переходных групп типизации, сгенерированные типизации файл теперь включает в себя следующие элементы:

/// <reference path="globals/react/index.d.ts" /> 
/// <reference path="globals/react-global/index.d.ts" /> 
/// <reference path="globals/react-addons-transition-group/index.d.ts" /> 
/// <reference path="globals/react-addons-css-transition-group/index.d.ts" /> 

Answer 2

As per the documentation, вы должны фактически импортировать react-addons-css-transition-group:

import ReactCSSTransitionGroup = require("react-addons-css-transition-group"); 

Answer 3

В настоящее время, правильный пакет, чтобы включить является react-transition-group:

import { CSSTransitionGroup } from 'react-transition-group';