渲染一個React.Component

Question

有人能指出這段代碼使用React渲染組件的問題嗎？ 它不斷拋出錯誤，提示“元素類型無效...檢查App的呈現方法”，但我看不到問題。

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 default Catalog export default ：

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

否則，當您使用import語句時，將不會導入任何內容：

import Catalog from './app-catalog';

Answer 2

將export添加到Catalog

export default class Catalog extends React.Component {
}

因為現在從catalog中沒有要import ，因此

import Catalog from './app-catalog';

您將獲得undefined和undefined的無效的React組件，這就是為什么您會得到錯誤