尝试使用 TransitionGroup、来自 react-transition-group 的 CSSTransition 时出错 'Element type is invalid …'

Question

抱歉，如果这听起来像是一个重复的问题。我正在尝试学习如何在 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;

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

检查TransitionGroup的渲染方法。

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

请帮忙，

谢谢。

Answer 1

在尝试了这么多东西后，我绞尽脑汁解决了这个问题，只需将 package.json 文件中的版本更新为 2.7.0

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

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

抱歉打扰了。

尝试使用 TransitionGroup、来自 react-transition-group 的 CSSTransition 时出错 'Element type is invalid …'

Error 'Element type is invalid …' when trying to use TransitionGroup, CSSTransition from react-transition-group

reactjs

typescript

react-transition-group