Рендеринг React.Component

Question

Может кто-то указать, что не так с этим фрагментом кода для рендеринга компонента с помощью React. Он продолжает бросать ошибку, говоря: «Тип элемента недействителен ... проверить метод рендеринга для приложения», и я не вижу проблемы.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/app'; 

ReactDOM.render(<App />, document.getElementById('container')); 

APP

import React from 'react'; 
import AppActions from '../actions/app-actions'; 
import Catalog from './app-catalog'; 

export default class App extends React.Component { 
render(){ 
    return (
     <div className="container"> 
      <Catalog /> 
     </div> 
    ) 
} 
} 

КАТАЛОГ

import React from 'react'; 
import AppStore from '../stores/app-store'; 
import CatalogItem from './app-catalog-item'; 

function getCatalog(){ 
return {items: AppStore.getCatalog()} 
}; 

class Catalog extends React.Component { 
constructor(){ 
    super(); 
    this.state = getCatalog(); 
} 
render(){ 
    let items = this.state.items.map(item => { 
     return <CatalogItem key={item.id} item={item} /> 
    }); 
    return (
     <div className="row"> 
      {items} 
     </div> 
    )  
} 
} 

Любая помощь будет оценена.

Answer 1

Добавить export в Catalog

export default class Catalog extends React.Component { 
} 

, потому что теперь от catalog нет ничего import, и когда вы делаете

import Catalog from './app-catalog'; 

вы получите undefined и undefined не действует Реагировать компонент, поэтому вы получите ошибку

Answer 2

Вам просто нужно к export default что-то в Catalog:

export default class Catalog extends React.Component { 
... 

В противном случае, когда вы не используете import заявления ничего импортируют:

import Catalog from './app-catalog';