react-bootstrap NavBar 没有按预期工作

Question

我对反应还很陌生，我在以下 class 中遇到 <NavDropdown.Item> 的问题：

import React, { Component } from 'react';
import { Nav, Navbar, NavItem, NavDropdown } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './NavMenu.css';


export class NavMenu extends Component {
  displayName = NavMenu.name


  render() {
    return (
        <Navbar bg="primary" variant="dark" fluid fixedTop collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    Brand
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav>
                    <LinkContainer to={'/'} exact>
                        <NavItem>
                            Home
                        </NavItem>
                    </LinkContainer>

                    <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
  }
}

构建项目后出现以下错误：

将 <NavDropdown.Item> 替换为 <MenuItem> 可行，但我想知道造成此类问题的原因是什么。

Answer 1

我相信您使用的是“react-bootstrap”0.33.1 版本。此版本中使用了“MenuItem”，因此它适合您，请参阅 here

您可以将版本升级到 v1.4.0 以使用“NavDropdown.Item”，参见 here

react-bootstrap NavBar 没有按预期工作

react-bootstrap NavBar not working as intended

reactjs

react-bootstrap