代码之家 › 专栏 › 技术社区 › Collybus

Reactjs Uncaught错误:元素类型无效:应为字符串

react-dom react-bootstrap webpack reactjs javascript

Collybus · 技术社区 · 7 年前

“未捕获错误:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。请检查的呈现方法。” App "

我已经检查并加倍检查了我的代码,我无法解决这个问题。

有人知道为什么吗?请参阅下面的代码。

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

菜单列表.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

1 回复 | 直到 6 年前

Andrii Starusiev 7 年前

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