Reactjs Uncaught error: Element type is invalid: expected a string
Reactjs Uncaught error: Element type is invalid: expected a string
我收到以下错误:
"Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App
"
我已经检查并仔细检查了我的代码,但我无法解决问题。
有人知道为什么吗?请参阅下面的代码。
App.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
//import ReactD3, {BarChart, LineChart} from 'react-d3-components';
import {MenuList} from './menu/menulist.js';
import {TabList} from './menu/tablist.js';
import {TabContainer, TabContent, TabPane, Nav, Tab, Row, Col} from 'react-bootstrap';
class App extends Component{
constructor(props){
super(props);
}
render(){
console.log("Here 1")
const menunames = [
{id: "first", name: "Tab 1"},
{id: "second", name: "Tab 2"}
];
const plist = [
{id: "first", name: "Content 1"},
{id: "second", name: "Content 2"}
];
console.log("Here 2")
return (
<div className="app">
<Tab.Container id="left-tabs-example">
<Row className="clearfix">
<Col sm={4}>
<MenuList items={menunames} />
</Col>
<Col sm={8}>
<TabList panels={plist} />
</Col>
</Row>
</Tab.Container>
</div>
);
}
}
export default App
menulist.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {TabContainer, TabContent, TabPane, Nav, NavItem, Tab, Row, Col} from 'react-bootstrap';
class MenuList extends Component{
constructor(props){
super(props);
}
MenuItem({ menuitems }){
return menuitems.map(item => (
<NavItem eventKey={item.id}>
{item.name}
</NavItem>
))
}
render(){
return (
<Nav bsStyle="pills" stacked>
<MenuItem menuitems={this.props.items} />
</Nav>
)
}
}
MenuList.propTypes = {
items: React.PropTypes.array
}
export default MenuList
tablist.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {TabContainer, TabContent, TabPane, Nav, Tab, Row, Col} from 'react-bootstrap';
class TabList extends Component{
constructor(props){
super(props);
}
TabPanel({ pans }){
return pans.map(panel => (
<Tab.Pane eventKey={panel.id}>
{panel.name}
</Tab.Pane>
))
}
render(){
return (
<Tab.Content animation>
this.props.panels.map(panel => (
<Tab.Pane eventKey={panel.id}>
{panel.name}
</Tab.Pane>
)
</Tab.Content>
)
}
}
TabList.propTypes = {
panels: React.PropTypes.array
}
export default TabList
import {MenuList} from './menu/menulist.js'; // not correct
import {TabList} from './menu/tablist.js';
如果您有 export default
,则在 import
中不需要花括号。
import MenuList from './menu/menulist.js'; //correct
import TabList from './menu/tablist.js';
Export {MyComponent, MySecondComponent}; -> import {MyComponent, MySecondComponent} from './path';
Export default MyComponent -> import MyComponent from './path';
我收到以下错误:
"Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App
"
我已经检查并仔细检查了我的代码,但我无法解决问题。
有人知道为什么吗?请参阅下面的代码。
App.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
//import ReactD3, {BarChart, LineChart} from 'react-d3-components';
import {MenuList} from './menu/menulist.js';
import {TabList} from './menu/tablist.js';
import {TabContainer, TabContent, TabPane, Nav, Tab, Row, Col} from 'react-bootstrap';
class App extends Component{
constructor(props){
super(props);
}
render(){
console.log("Here 1")
const menunames = [
{id: "first", name: "Tab 1"},
{id: "second", name: "Tab 2"}
];
const plist = [
{id: "first", name: "Content 1"},
{id: "second", name: "Content 2"}
];
console.log("Here 2")
return (
<div className="app">
<Tab.Container id="left-tabs-example">
<Row className="clearfix">
<Col sm={4}>
<MenuList items={menunames} />
</Col>
<Col sm={8}>
<TabList panels={plist} />
</Col>
</Row>
</Tab.Container>
</div>
);
}
}
export default App
menulist.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {TabContainer, TabContent, TabPane, Nav, NavItem, Tab, Row, Col} from 'react-bootstrap';
class MenuList extends Component{
constructor(props){
super(props);
}
MenuItem({ menuitems }){
return menuitems.map(item => (
<NavItem eventKey={item.id}>
{item.name}
</NavItem>
))
}
render(){
return (
<Nav bsStyle="pills" stacked>
<MenuItem menuitems={this.props.items} />
</Nav>
)
}
}
MenuList.propTypes = {
items: React.PropTypes.array
}
export default MenuList
tablist.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {TabContainer, TabContent, TabPane, Nav, Tab, Row, Col} from 'react-bootstrap';
class TabList extends Component{
constructor(props){
super(props);
}
TabPanel({ pans }){
return pans.map(panel => (
<Tab.Pane eventKey={panel.id}>
{panel.name}
</Tab.Pane>
))
}
render(){
return (
<Tab.Content animation>
this.props.panels.map(panel => (
<Tab.Pane eventKey={panel.id}>
{panel.name}
</Tab.Pane>
)
</Tab.Content>
)
}
}
TabList.propTypes = {
panels: React.PropTypes.array
}
export default TabList
import {MenuList} from './menu/menulist.js'; // not correct
import {TabList} from './menu/tablist.js';
如果您有 export default
,则在 import
中不需要花括号。
import MenuList from './menu/menulist.js'; //correct
import TabList from './menu/tablist.js';
Export {MyComponent, MySecondComponent}; -> import {MyComponent, MySecondComponent} from './path';
Export default MyComponent -> import MyComponent from './path';