错误显示“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义。您可能忘记从定义的文件中导出组件.
检查 Route
的渲染方法。”
代码如下所示:
import { CSSTransitionGroup } from 'react-transition-group'
import React, { Component } from 'react';
export default class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {items: ['hello', 'world', 'click', 'me']};
this.handleAdd = this.handleAdd.bind(this);
}
handleAdd() {
const newItems = this.state.items.concat([
prompt('Enter some text')
]);
this.setState({items: newItems});
}
handleRemove(i) {
let newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
}
render() {
const items = this.state.items.map((item, i) => (
<div key={item} onClick={() => this.handleRemove(i)}>
{item}
</div>
));
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items}
</CSSTransitionGroup>
</div>
);
}
}
然后,尝试像这样使用它:
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));
这是样式的样子:
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
任何人都可以针对指定的错误提出合理的解决方案吗?
最佳答案
您正在对模块的 v2 版本使用 v1 语法。
参见迁移指南 https://github.com/reactjs/react-transition-group/blob/master/Migration.md
大多数情况下,这样的错误指向导入问题。
在你的例子中是 <CSSTransitionGroup>
已被删除,新的 <CSSTransition>
已添加组件。
另请记住,api 也可能已更改,因此您必须重新编写示例。
所以至少正确的导入是:
import { TransitionGroup } from 'react-transition-group';
关于javascript - 在 React 组件上使用 CSSTransitionGroup 会出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45258635/