React Navbar 未顯示

Question

我一直在嘗試使用 reactstrap 將導航欄放入 React 項目中。 但是由於某些原因，Navbar 並沒有只顯示 NavbarBrand 中的 h1。 我嘗試更改 css 樣式，復制並粘貼來自不同網站的其他示例導航欄，並嘗試了其他類似的解決方案，但沒有任何效果。 我使用的是 React 17.0.2 版和 reactstrap 8.9.0 版。

這是我的導航欄組件：

import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap';
//import { NavLink } from 'react-router-dom';

class Header extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isNavOpen: false
        };
        this.toggleNav = this.toggleNav.bind(this);
    }

    toggleNav() {
        this.setState({
            isNavOpen: !this.state.isNavOpen
        });
    }

    render() {

        return(
            <Navbar bg="dark" variant="dark">
                <div className="container">
                    <NavbarToggler onClick={this.toggleNav} />
                    <NavbarBrand href="/">
                        <h1>Navbar</h1>
                    </NavbarBrand>
                    <Collapse isOpen={this.state.isNavOpen} navbar>
                        <Nav navbar>
                            <NavItem>
                                <p>Test</p>
                            </NavItem>
                        </Nav>
                    </Collapse>
                </div>
            </Navbar>
        );
    }
}

export default Header;

導航欄的外觀

總體而言，我對 React 和 Javascript 還是比較陌生，希望有人能幫助我。

Answer 1

您將狀態設置為 false 的isNavOpen和您的

<Collapse isOpen={this.state.isNavOpen} navbar>
  <Nav navbar>
    <NavItem>
      <p>Test</p>
    </NavItem>
  </Nav>
</Collapse>

取決於isNavOpen狀態，該狀態期望在屏幕上顯示為true 。

嘗試將狀態中的isNavOpen設置為true 。