Question

我正在尝试在我的React应用程序中渲染自定义导航栏，但出现无效类型错误。

我知道React中有默认的和命名的import / exports，但是我将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.Header was removed in v1：

Navbar移除了Navbar.Header移除了Navbar.Form移除了流体，使用您自己的Container组件中的inverse被删除并替换为 variant =“ dark”定位道具已合并为固定= {top | bottom}和粘性= {top | bottom}，staticTop已删除

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

2 个答案: