问题描述
抱歉,这听起来像是重复的问题。我正在尝试学习如何在打字稿中使用 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,但它对我不起作用。
请帮忙
谢谢。
解决方法
在尝试了这么多事情后,在我摸不着头脑之后才解决了这个问题,只需将 package.json
文件中的版本更新为 2.7.0
"react-transition-group": "2.7.0",
我想我的错误只是盲目地使用了他们 github 指南中的 yarn add react-transition-group@1.x
。
抱歉打扰了。