导入自定义 React 组件时元素类型无效

Question

我正在尝试在我的 React 应用程序中呈现自定义导航栏，但我收到了 Invalid Type 错误。

我知道 React 中有默认和命名的导入/导出，但是我将 CustomNavBar 类导出为默认值，并将其作为默认值导入 App.jsx。其他发帖者提到这可能是软件包版本的问题，但我不知道从哪里开始解决这个问题。

App.jsx：

import Button from 'react-bootstrap/Button';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Resume from './components/Resume';
import CustomNavBar from './components/CustomNavBar';
import './App.css';

function App() {
  return (
    <div className="App">
      <Router>
        <div>
          <CustomNavBar />
          <Route exact path = "/" component={Home} />
          <Route path = "/about" component={About} />
          <Route path = "/resume" component={Resume} />
        </div>
      </Router>

    </div>
  );
}

export default App;

当 CustomNavBar 组件被省略时，代码会正常运行。

CustomNavBar.jsx：

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="/">Home</Link>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav pullRight>
                        <NavItem eventKey={1} componentClass={Link} to="/">
                            Home
                        </NavItem>
                        <NavItem eventKey={2} componentClass={Link} to="/about">
                            About
                        </NavItem>
                        <NavItem eventKey={3} componentClass={Link} to="/resume">
                            Resume
                        </NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }
}

package.json:

{
  "name": "my_site",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^4.4.0-beta.8",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查CustomNavBar的渲染方法。

/****已解决****/ 标题不再从引导程序中导出，品牌和切换不应包含在引导程序 4 中的 div 中。

Answer 1

通过查看 react-bootstrap 的文档，我认为它不会暴露 Navbar.Header。这可能是问题吗？ 我对NavItem 有同样的预感。在我看来应该是Nav.Item。

Answer 2

好像Navbar.Headerwas removed in v1：

Navbar 移除 Navbar.Header 移除 Navbar.Form 移除流体，使用 你自己的 Container 组件 in. inverse 移除并替换为 variant="dark" 定位道具已合并为 fixed={top|bottom} 和sticky={top|bottom}，staticTop 已被移除