Javascript Reactjs未捕获错误：元素类型无效：应为字符串

我得到以下错误：

“未捕获错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。请检查

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
//从“react-d3-components”导入react3，{BarChart，LineChart}；
从“./menu/MenuList.js”导入{MenuList}；
从“./menu/TabList.js”导入{TabList}；
从'react bootstrap'导入{TabContainer、TabContent、TabPane、Nav、Tab、Row、Col}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
console.log（“这里是1”）
常量菜单=[
{id:“first”，name:“Tab 1”}，
{id:“second”，name:“Tab 2”}
];
常数plist=[
{id:“first”，name:“Content 1”}，
{id:“second”，name:“Content 2”}
];
console.log（“此处为2”）
返回(
);
}
}
导出默认应用程序

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“react bootstrap”导入{TabContainer、TabContent、TabPane、Nav、NavItem、Tab、Row、Col}；
类MenuList扩展了组件{
建造师（道具）{
超级（道具）；
}
MenuItem（{menuitems}）{
返回menuitems.map（项=>(
{item.name}
))
}
render（）{
返回(
)
}
}
MenuList.propTypes={
项目：React.PropTypes.array
}
导出默认菜单列表

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 React，{Component}来自'React'；
从“react dom”导入react dom；
从'react bootstrap'导入{TabContainer、TabContent、TabPane、Nav、Tab、Row、Col}；
类列表扩展组件{
建造师（道具）{
超级（道具）；
}
TabPanel（{pans}）{
返回pans.map（面板=>(
{panel.name}
))
}
render（）{
返回(
this.props.panels.map（panel=>(
{panel.name}
)
)
}
}
TabList.propTypes={
面板：React.PropTypes.array
}
导出默认小报列表

如果您有

导出默认值

，则在

导入

中不需要花括号

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';

---

谢谢。我已经修复了这个问题，但是现在我遇到了以下错误：ReferenceError:MenuItem未在MenuList.render中定义

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';