Question

以下是错误消息：

React.createElement：type无效 - 期望一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：未定义。您可能忘记从中导出组件它所定义的文件。

错误指向此代码行：

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

有助于从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

ReactJS - 错误消息：React.createElement：type无效 - 期望一个字符串

1 个答案: