如何使用es6语法导入ReactCSSTransitionGroup？

Question

我正在尝试为我的React应用程序创建Modal窗口，并且我正在遵循this教程。

不过，我有以下错误

Warning: 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). Check the render method of `Modal`. 

这里是我的代码

import React from 'react' 
import {ReactCSSTransitionGroup} from 'react-addons-css-transition-group' 

const Modal = React.createClass ({ 

    render() { 

     if (this.props.isOpen) { 
      return (
       <ReactCSSTransitionGroup transitionName={this.props.transitionName}> 
        <div className="modal"> 
         {this.props.children} 
        </div> 
       </ReactCSSTransitionGroup> 
      )  
     } 

     else { 
      return (
       <ReactCSSTransitionGroup transitionName={this.props.transitionName} /> 
      ) 
     } 
    } 
}) 

module.exports = Modal 

我安装了反应 - 插件 - CSS-过渡小组由npm install --save react-addons-css-transition-group

的问题是清楚的ReactCSSTransitionGroup没有被正确导入，因为用纯div替换它不会引发任何错误。

Answer 1

你必须从{ReactCSSTransitionGroup}

import {ReactCSSTransitionGroup} from 'react-addons-css-transition-group' 

删除括号应该

import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 

此外，你应该提供给孩子一个重要的内部ReactCSSTransitionGroup

<ReactCSSTransitionGroup transitionName={this.props.transitionName}> 
        <div className="modal" key="transitionGroup"> 
         {this.props.children} 
        </div> 
</ReactCSSTransitionGroup>