Javascript 低级react动画API无法使其工作

我在React应用程序中做了一些动画。我使用

reactcstransitiongroup

在页面转换时添加动画。但是现在我想使用低级API

ReactTransitionGroup

，但它不起作用。我用过：

import {ReactTransitionGroup} from 'react-addons-transition-group';

然后在类内我渲染：

render() {
    const {user} = this.props;
    const styles = require('./App.scss');

    return (
      <div className={styles.app}>
        <ReactTransitionGroup component={React.DOM.html} transitionName="example">
          <div className={styles.appContent}>
            {this.props.children}
          </div>
        </ReactTransitionGroup>
      </div>
    );
}

render（）{
const{user}=this.props；
const styles=require（'./App.scss'）；
返回(
{this.props.children}
);
}

我不知道我做错了什么。我得到这个错误：

React.createElement:类型不应为null、未定义、布尔值或数字。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）

---

请告诉我我犯了什么错误。

您正在使用命名的ES6导入语法：

import {ReactTransitionGroup} from 'react-addons-transition-group';

import ReactTransitionGroup from 'react-addons-transition-group';

这与使用ES6默认导入语法不同：

import {ReactTransitionGroup} from 'react-addons-transition-group';

import ReactTransitionGroup from 'react-addons-transition-group';

如果您使用ES6模块，您必须遵守以下原则：。一个模块可以有一个默认导出和/或多个命名导出，它们之间有很大的区别

现在，

react addons transition group

不是ES模块。它是npm上发布的CommonJS包。官方示例展示了如何在CommonJS环境中使用它：

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

你可能会使用像巴贝尔这样的运输工具。在这种情况下，重要的是你要理解。CommonJS与ES模块不同，没有命名或默认导出的概念。这就是为什么Babel将以CommonJS风格编写的模块解释为只有一个默认导出，没有命名导出的原因。当然，使用Babel编译的ES模块包含特殊提示，以便以后可以识别它们，但是

react addons css过渡组的情况并非如此，它最初是用CommonJS风格编写的

这就是为什么

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

对应于

import ReactTransitionGroup from 'react-addons-transition-group';

而不是

import {ReactTransitionGroup} from 'react-addons-transition-group';

我使用这个ReactTransitionGroup的主要目的是使用生命周期挂钩，比如componentWillEnter（回调）、componentWillLeave（回调）。所以我想知道我是否可以在我的类中添加这些生命周期挂钩，正如上面的例子所引用的。我试图添加它，但那些生命周期挂钩没有被调用。所以你能告诉我一段代码吗？这是一个不同的和无关的问题。请创建一个新的，显示您尝试了什么，以及哪些不起作用。是的，我创建了一个新的