ReactJS - 错误消息：React.createElement：类型无效 - 需要一个字符串答案

【问题标题】：ReactJS - Error Message: React.createElement: type is invalid -- expected a stringReactJS - 错误消息：React.createElement：类型无效 - 需要一个字符串
【发布时间】：2017-09-15 20:31:27
【问题描述】：

这是一条错误消息：

React.createElement: type is invalid -- 需要一个字符串（对于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义它的文件。

错误指向此代码行：

 <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;

【问题讨论】：

只是一个附带问题。为什么要将 this.state 作为参数传递给您的方法？
这是一门课程中的一个练习，它教我如何做到这一点，我是这项技术的初学者，所以我不知道教练这样做的原因，我不知道哪种方案更好。

标签： javascript reactjs

【解决方案1】：

据react-transition-group migration guide;

一些有助于从 v1 迁移到 v2 的注意事项。

<CSSTransitionGroup> 组件已被删除。一种 <CSSTransition> 组件已添加用于新的 <TransitionGroup> 组件来完成同样的任务。

这告诉我们下面的行不正确。

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

【讨论】：