使用 react-bootstrap 时组件未定义

Posted 2023-02-22

【中文标题】使用 react-bootstrap 时组件未定义

【英文标题】：Component is undefined when use react-bootstrap

【发布时间】：2021-01-08 04:32:30

【问题描述】：

我有这样的 react-bootstrap 代码。

import React from 'react'
import  Link  from 'react-router-dom'
import  Navbar, NavbarBrand, NavItem, Nav  from 'react-bootstrap'
import './App.css'
import NavbarToggle from 'react-bootstrap/esm/NavbarToggle'
import Routes from './Routes'
import NavbarCollapse from 'react-bootstrap/esm/NavbarCollapse'
import  LinkContainer  from 'react-router-bootstrap'

function App() 
  return (
    <div className="App container">
      <Navbar fluid collapseOnSelect>
        <Navbar.Header>
          <NavbarBrand>
            <Link to="/">Scratch</Link>
          </NavbarBrand>
          <NavbarToggle />
        </Navbar.Header>
        <NavbarCollapse>
          <Nav pullRight>
            <LinkContainer to="/signup">
              <NavItem>Signup</NavItem>
            </LinkContainer>
            <LinkContainer to="/login">
              <NavItem>Sign</NavItem>
            </LinkContainer>
          </Nav>
        </NavbarCollapse>
      </Navbar>
      <Routes />
    </div>
  )


export default App

它发生了错误。错误消息是

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

注意：当我省略 Navbar.Header 时，它可以正常工作。

【问题讨论】：

我在 API 文档中看不到任何提及 Navbar.Header：react-bootstrap.github.io/components/navbar

看起来你可能正在使用 React Bootstrap 4.5。 Navbar.Header 在此版本中被删除 - react-bootstrap.netlify.app/migrating/#navbarheader。查看以前版本的重大更改列表

所以。我应该改用什么？

【参考方案1】：

NavBar.Header 是 React-bootstrap 的 removed in release v1。基本上，如果你添加这个组件，它主要是向 DOM 添加一个 div 和 navbar-header 类。

<div class="navbar-header"></div>

如果您想知道或想复制它的行为，可以查看以下答案：What does "navbar-header" class do in Bootstrap? 或查看一些过时的 Bootstrap 样式表（v4 之前）。

如果您有空闲更新布局，请在此处查看 React-bootstrap Nav 的更新示例：https://react-bootstrap.github.io/components/navbar/#navbars