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

Question

我在我的 React 应用程序中做了一些动画。我使用 ReactCSSTransitionGroup 来添加页面转换的动画。但现在我想使用低级 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>
    );
}

我无法弄清楚我做错了什么。我收到此错误:

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

请让我知道我犯了什么错误。

Answer 1

您正在使用 named ES6 导入语法:

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

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

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

如果你使用 ES6 模块，最重要的是你 understand the difference between named and default imports .一个模块可以有一个默认导出和/或多个命名导出，它们之间有很大的区别。

现在，react-addons-transition-group 不是 ES 模块。它是一个发布在 npm 上的 CommonJS 包。官方示例展示了如何在 CommonJS 环境中使用它:

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

您可能使用像 Babel 这样的转译器。在这种情况下，了解 how Babel interops with CommonJS modules 很重要. CommonJS 不像 ES 模块，没有命名或默认导出的概念。这就是为什么 Babel 将以 CommonJS 风格编写的模块解释为只有一个默认导出，而没有命名导出。当然，用 Babel 编译的 ES 模块包含特殊提示，以便以后可以识别它们，但这react-addons-css-transition-group 不是这种情况，它最初是用 CommonJS 风格编写的。

这就是为什么

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

对应于

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

而不是

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