渲染一个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组件，这就是为什么您会得到错误