ReactJS - 錯誤消息：React.createElement：類型無效 - 預期的字符串

下面是一個錯誤消息：ReactJS - 錯誤消息：React.createElement：類型無效 - 預期的字符串

React.createElement：類型無效 - 預期一個字符串（內置組件）或類/函數（用於複合組件）但得到：未定義。你可能忘了您的組件從導出它在定義的文件

錯誤是指向該行代碼：

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

來源

2017-09-15 claudiobitar

只是一個方面的問題。你爲什麼將'this.state'作爲參數傳遞給你的方法？ – bennygenel

這是一門來自課程的練習，教會了我如何做到這一點，我是這個技術的開端，所以我不知道爲什麼老師這樣做，我不知道哪個解決方案是更好。 – claudiobitar

Acourding到react-transition-group migration guide;

有助於從v1遷移到v2的一些注意事項。

<CSSTransitionGroup>組件已被刪除。 A <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

來源

2017-09-15 20:57:10 bennygenel

ReactJS - 錯誤消息：React.createElement：類型無效 - 預期的字符串

回答

相關問題