【问题标题】:What component did I miss to export? Error type is invalid...error我错过了导出哪些组件?错误类型无效...错误
【发布时间】:2019-02-15 09:13:29
【问题描述】:

我确定我导出了所有组件,但我一直收到同样的错误:

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。检查CustomNavbar的渲染方法。

App.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home.js';
import Navbar from './CustomNavbar.js';


class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Route exact path="/" component={Home} />
        </div>
      </Router>
    );
  }
}

export default App;

CustomNavbar.js

import React, { Component } from 'react'
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class CustomNavbar extends Component {
    render() {
        return (
            <Navbar default collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    <Link to="/">My Page</Link>
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav pullRight>
                <NavItem eventKey={1} componentClass={Link} to="/">
                    Home
                </NavItem>
                </Nav>
            </Navbar.Collapse>
            </Navbar>
        )
    }
}

Home.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Jumbotron, Button } from 'react-bootstrap';

export default class Home extends Component {
    render() {
        return(
            <div>
            <Jumbotron>
                <h1>Hello, this is my page</h1>
            </Jumbotron>
            <Link to="/about">
            <Button bsStyle="primary">About</Button>
            </Link>
            </div>

        )
    }
}

【问题讨论】:

    标签: reactjs react-router


    【解决方案1】:

    改一下

    import Navbar from './CustomNavbar.js';
    

    import CustomNavbar from './CustomNavbar.js';
    

    改变

      <Navbar />
    

      <CustomNavbar />
    

    在 App.js 中

    【讨论】:

    • 这应该没什么区别。您可以将默认导出命名为任何您喜欢的名称。错误消息还说它是 CustomNavbar 渲染方法内部的东西,而不是 App 的渲染方法。这可能是使用 react-bootstrap 组件的错字
    猜你喜欢
    • 2017-09-02
    • 1970-01-01
    • 1970-01-01
    • 2021-10-17
    • 1970-01-01
    • 2017-08-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多