尝试使用来自 react-transition-group 的 TransitionGroup、CSSTransition 时出现错误“元素类型无效......”答案

【问题标题】：Error 'Element type is invalid …' when trying to use TransitionGroup, CSSTransition from react-transition-group尝试使用来自 react-transition-group 的 TransitionGroup、CSSTransition 时出现错误“元素类型无效......”
【发布时间】：2021-07-04 03:14:43
【问题描述】：

抱歉，这听起来像是一个重复的问题。我正在尝试学习如何在 typescript 中使用 react-transtion-group，但是出现了错误。这是我的代码：

import React, { useState } from 'react';
import './App.css';
import {
  TransitionGroup,
  CSSTransition
} from "react-transition-group";

const App = () => {

  const [myState, updateMyState] = useState({ items: ['hello', 'world', 'click', 'me'] })

  const handleAdd = () => {
    let userInput: string | null = prompt('Please enter your name.', "")
    const newItems = myState.items.concat(userInput!)
    updateMyState({ items: newItems })
  }

  const handleRemove = (index: number) => {
    let newItems = myState.items.slice();
    newItems.splice(index, 1);
    updateMyState({ items: newItems })
  }

  const items = myState.items.map((item, i) => (
    <CSSTransition
      key={i}
      classNames="example"
      timeout={{ enter: 500, exit: 300 }}
    >
      <div onClick={() => handleRemove(i)}>
        {item}
      </div>
    </CSSTransition>
  ));

  return (
    <div className="App">
      <button onClick={handleAdd}>Add Item</button>
      <TransitionGroup>
        {items}
      </TransitionGroup>
    </div>
  );
}

export default App;

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查TransitionGroup的渲染方法。

我也遵循了这里的迁移指南：https://github.com/reactjs/react-transition-group/blob/master/Migration.md，但它对我不起作用。

请帮忙，

谢谢。

【问题讨论】：

标签： reactjs typescript react-transition-group

【解决方案1】：

在尝试了这么多事情后，我只是想解决这个问题，只需将package.json 文件中的版本更新为 2.7.0

"react-transition-group": "2.7.0",

我想我的错误只是盲目地使用他们 github 指南上的yarn add react-transition-group@1.x。

抱歉打扰了。

【讨论】：