Question

有人可以指出使用React渲染组件的这段代码有什么问题。它不断抛出错误说＆＃34;元素类型无效...检查App＆＃34;的渲染方法我无法看到问题。

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>
    )   
 }
}

CATALOG

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 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组件，这就是您收到错误的原因

渲染React.Component

2 个答案: