为什么 collapseOnSelect 在此导航栏中不起作用

Question

尝试在使用 React 时让 Navbar 折叠OnSelect bootstrap...似乎不起作用？

这是我的进口...

import React, {Component} from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {Container} from 'react-bootstrap';
import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css';

这是我的导航栏...

 <Navbar collapseOnSelect fixed="top" bg="dark" expand="lg" variant="dark">
  <Navbar.Brand href="/"><img src={LifeBar} alt="logo" thumbnail style={{height: 100, marginLeft: 20}} className="logos"/></Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="ml-auto">
    <Link className="nav-link" to="/">Home</Link>
    <Link className="nav-link" to="/bio">Bio</Link>
    <Link className="nav-link" to="/appearances">Appearances</Link>
    <Link className="nav-link" to="/support">Support</Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Answer 1

您必须为 class 组件使用 "this.state" 或 “功能组件的 Hooks” 在我的例子中，我使用了 React Hooks。

const [expanded, setExpanded] = useState(false);

<Navbar expanded={expanded} fixed="top" bg="dark" expand="lg" variant="dark">
  <Navbar.Brand href="/"><img src={LifeBar} alt="logo" thumbnail style={{height: 100, marginLeft: 20}} className="logos"/></Navbar.Brand>
  <Navbar.Toggle onClick={() => setExpanded(expanded ? false : "expanded")} aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="ml-auto">
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/">Home</Link></Nav.Link>
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/bio">Bio</Link></Nav.Link>
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/appearances">Appearances</Link></Nav.Link>
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/support">Support</Link></Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

为什么 collapseOnSelect 在此导航栏中不起作用

Why Is collapseOnSelect not working in this Navbar

reactjs

react-bootstrap