Question

我收到以下错误：

“未捕获错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。检查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

Answer 1

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

Reactjs Uncaught错误：元素类型无效：期望一个字符串

1 个答案: