在反应组件上使用 CSSTransitionGroup 会出错

Question

错误说“元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从它定义的文件中导出您的组件。检查的渲染方法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;
}

任何人都可以为指定的错误提出合乎逻辑的解决方案吗？

Answer 1

您在模块的 v2 版本中使用 v1 语法。

请参阅迁移指南https://github.com/reactjs/react-transition-group/blob/master/Migration.md

大多数情况下，这样的错误指向导入问题。

在您的情况下，<CSSTransitionGroup>已删除并<CSSTransition>添加了新组件。

另请记住，api 也可能已更改，因此您必须重新编写示例。

所以至少正确的导入是：

import { TransitionGroup } from 'react-transition-group';