[英]Rendering a React.Component
Could someone point out what's wrong with this piece of code for rendering a component using React. 有人能指出这段代码使用React渲染组件的问题吗? It keeps throwing an error saying "Element type is invalid ... check render method for App" and I can't see the problem.
它不断抛出错误,提示“元素类型无效...检查App的呈现方法”,但我看不到问题。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('container'));
APP 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>
)
}
}
Any help would be much appreciated. 任何帮助将非常感激。
You just need to export default
something in Catalog
: 您只需要
export default
Catalog
export default
:
export default class Catalog extends React.Component {
...
Otherwise, when you use the import
statement nothing will import: 否则,当您使用
import
语句时,将不会导入任何内容:
import Catalog from './app-catalog';
Add export
to Catalog
将
export
添加到Catalog
export default class Catalog extends React.Component {
}
because now from catalog
there is nothing to import
, and when you do 因为现在从
catalog
中没有要import
,因此
import Catalog from './app-catalog';
you will get undefined
and undefined
is not valid React component, that's why you get error 您将获得
undefined
和undefined
的无效的React组件,这就是为什么您会得到错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.