javascript - ReactJS - 错误消息 : React. createElement:类型无效——需要一个字符串

Question

这是一条错误信息:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

错误指向此代码行:

 <CSSTransitionGroup {...fadeAnimation}> 

完整代码:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { CSSTransitionGroup } from 'react-transition-group';

const URL_TEAMS = "http://localhost:3001/teams";

const fadeAnimation = {
  transitionName:"fade",
  transitionAppear:true,
  transitionAppearTimeout:500,
  transitionEnter:true,
  transitionEnterTimeout:500,
  transitionLeave:true,
  transitionLeaveTimeout:500
}

class Teams extends Component {
    constructor(props){
    super(props);

    this.state = {
        teams:[],
        filtered:[],
        keyword:''
    }
}

componentDidMount(){
  fetch(URL_TEAMS,{method: 'GET'})
  .then(response => response.json())
  .then(json => {
    this.setState({
      teams:json,
      filtered:json
    })
  })
}

rendeList = ({filtered}) =>{
  return filtered.map((item) => {
    return(
      <Link to={`/team/${item.name}`} key={item.id} 
      className="team_item">
        <img alt={item.name} src={`/images/teams/${item.logo}`}/>
      </Link> 
    ) 
  })
}

render() {
    return (
        <div className="teams_component">
          <div className="teams_input">
            <input type="text"
                   placeholder="Search for a team"
            />
          </div>
          <div className="teams_container">
             <CSSTransitionGroup {...fadeAnimation}>
               {this.rendeList(this.state)}              
             </CSSTransitionGroup>
           </div>
        </div>
    );
  }
}

export default Teams;

Answer 1

根据 react-transition-group migration guide :

A few notes to help with migrating from v1 to v2.

The <CSSTransitionGroup> component has been removed. A<CSSTransition> component has been added for use with the new<TransitionGroup> component to accomplish the same tasks.

这告诉我们下面一行是不正确的:

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

您应该使用如下新组件:

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

有关更多信息，您可以查看 docs for react-transition-group .