嘗試使用來自 react-transition-group 的 TransitionGroup、CSSTransition 時出現錯誤“元素類型無效......”

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;

錯誤：元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 您可能忘記從定義組件的文件中導出組件，或者您可能混淆了默認導入和命名導入。

檢查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 。

很抱歉打擾了。