导入react-transition-group无默认导出ReactCSSTransitionGroup报错如何解决

报错根因 #

你遇到的导入错误是版本不兼容导致：当前主流版本的react-transition-group（v2及以上）已经移除了旧版的ReactCSSTransitionGroup默认导出，你参考的是React官方文档中已废弃的v1版本组件用法，和新包API不匹配。

可选解决方案 #

方案1：沿用你参考的旧文档写法 #

适合不想调整现有业务代码的场景：

• 卸载当前已安装的新版依赖：npm uninstall react-transition-group
• 安装支持旧API的兼容包：npm install react-addons-css-transition-group
• 修改导入语句：import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
  修改完成后即可直接运行文档中的示例代码。

方案2：使用新版推荐API（推荐） #

无需更换已安装的依赖，仅调整用法即可，新API灵活性更高：

• 修改导入语句，按命名导出引入对应组件：import { CSSTransition, TransitionGroup } from 'react-transition-group'
• 替换组件写法，用TransitionGroup包裹CSSTransition实现原有动画效果，示例代码如下：

<TransitionGroup>
  {renderList.map(item => (
    <CSSTransition
      key={item.uniqueId}
      timeout={500}
      classNames="fade"
    >
      <div className="list-item">{item.text}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

• CSS动画类写法和旧版完全一致，按你设置的classNames前缀编写对应入场、退场样式即可，比如.fade-enter、.fade-enter-active、.fade-exit、.fade-exit-active。

内容的提问来源于stack exchange，提问作者Tyler