Question

我是React的新手并且一直试图在测试页面添加一个非常基本的动画，以检查我是否理解所涉及的过程......不幸的是我不这样做。

我已经安装了我认为正确的类型，来自自动生成的打字的摘录＆gt; index.d.ts文件是：

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

我已经使用正确的条目设置了JSPM配置文件，因为在没有任何动画的情况下使用React时没有问题; map部分包含以下条目：

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

index.tsx文件非常简单，包含（请忽略运行代码段，出于某种原因，我无法使用反引号在下面插入多行代码）：

＆＃13;

/// <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'));

＆＃13;

使用TypeScript编译器为index.js生成以下输出：

＆＃13;

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

＆＃13;

尝试使用上述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

As per the documentation，您实际上应该导入react-addons-css-transition-group：

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

Answer 2

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

/// <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';

尝试添加ReactCSSTransitionGroup时未定义/ null引用（TypeScript + React + JSPM）

3 个答案: