javascript - 在 React 组件上使用 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';