渲染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'));

应用程序

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

你只需要在Catalog中export default一些东西

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

否则，在使用import语句时，将不会导入任何内容：

import Catalog from './app-catalog';

Answer 2

向Catalog添加export

export default class Catalog extends React.Component {
}

因为现在从catalog到import没有任何东西，当你这样做的时候

import Catalog from './app-catalog';

您将得到undefined，而undefined不是有效的React组件，这就是您收到错误的原因