反应导航栏没有显示

Question

我一直在尝试使用 reactstrap 将导航栏放入 React 项目中。但是由于某些原因，导航栏不只显示 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;

How the navbar looks

总体而言，我对 React 和 Javascript 还是比较陌生，希望有人可以帮助我。

Answer 1

您将isNavOpen 的状态设置为 false 并且您的

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

取决于isNavOpen 状态，预计屏幕上会显示true。

尝试将状态中的isNavOpen 设置为true。