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

【问题标题】：Using CSSTransitionGroup on a react component is giving error在反应组件上使用 CSSTransitionGroup 会出错
【发布时间】：2017-12-28 17:50:46
【问题描述】：

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

谁能为指定的错误想出一个合乎逻辑的解决方案？

【问题讨论】：

我在导入命名/默认导出时也遇到了这个错误。 IE。有或没有{}

标签： javascript html css reactjs

【解决方案1】：

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

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

大多数情况下，此类错误指向导入问题。

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

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

所以至少正确的导入应该是：

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

【讨论】：

【解决方案2】：

我尝试使用从react-transition-group 导入TransitionGroup as

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

或者您也可以将 TransitionGroup 导入为

import TransitionGroup from 'react-transition-group/TransitionGroup';

<button className="Button" onClick={this.addItemHandler}>Add Item</button>
                <p>Click Item to Remove.</p>
                <TransitionGroup 
                    component="ul"
                    className="List"
                >
                    {listItems}
                </TransitionGroup>

【讨论】：

【解决方案3】：

第 1 步：安装 react-transition-group

E:\reactapp> npm install react-transition-group --save

第 2 步：查找：CSSTransitionGroup 并替换：TransitionGroup

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

<button onClick={this.handleAdd}>Add Item</button>
        <TransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {items}
        </TransitionGroup>

希望我的回答对你有帮助

【讨论】：