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不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。

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

Answer 1

您正在使用命名的 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模块包含特殊提示，以便以后可以识别它们，但是这样最初以CommonJS风格编写的react-addons-css-transition-group不是这种情况。

这就是为什么

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

对应

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

而不是

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

低级反应动画API无法使其正常工作

1 个答案: