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

我在我的 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>
    );
}

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



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

最佳答案

您正在使用名为 的 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';

关于javascript - 低级 react 动画 API 无法使其工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35936583/