Undefined/null 尝试添加 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'));

使用 TypeScript 编译器为 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

当我删除所有动画引用时，一切都按预期工作。

我确定我犯了一个非常简单的错误，但我花了几个小时试图找出原因但没有成功。请注意，我在 Whosebug、Google 和 Bing 上搜索过寻求帮助，但奇怪的是我找不到任何类似的东西。

如有任何帮助，我们将不胜感激，

亲切的问候，

约翰

Answer 1

As per the documentation, you should actually be importing react-addons-css-transition-group:

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

Answer 2

感谢您的回复。我设法通过添加 react-global 和 react-addons-transition-group 类型来实现它，生成的类型文件现在包含以下条目：

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

如今，要包含的正确包是 react-transition-group:

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

Undefined/null 尝试添加 ReactCSSTransitionGroup 时的参考（TypeScript + React + JSPM）

Undefined/null reference when trying to add ReactCSSTransitionGroup (TypeScript + React + JSPM)

typescript

reactjs

jspm