Reactjs Uncought Fehler: Elementtyp ist ungültig: erwartet eine Zeichenfolge

Question

ich die folgende Fehlermeldung erhalten:

„nicht erfasste Fehler: Elementtyp ist ungültig: erwartet eine Zeichenfolge (für eingebaute Komponenten) oder eine Klasse/Funktion (für Composite-Komponenten) aber haben: undefined. Überprüfen Sie die Render-Methode von App "

Ich habe überprüft und verdoppelte überprüft meinen Code und ich kann das Problem nicht trainieren.

Wer weiß warum? Siehe Code unten.

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 

Answer 1

import {MenuList} from './menu/menulist.js'; // not correct 
import {TabList} from './menu/tablist.js'; 

Wenn Sie export default haben Sie brauchen nicht lockig Armschienen in 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';