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

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

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

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

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

另请注意，api也可能已被更改，因此您必须重新修改您的示例。

所以至少正确的导入是：

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

Answer 2

步骤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>

希望我的回答对您有帮助

Answer 3

我尝试使用从TransitionGroup导入react-transition-group的方式

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>

在react组件上使用CSSTransitionGroup会出错

3 个答案: