React项目中使用reactstrap的Navbar组件无法正常显示问题求助

问题原因与解决方案 #

1. 缺失对应版本Bootstrap样式引入

reactstrap仅提供组件封装，不自带Bootstrap样式，你当前使用的reactstrap 8.9.0适配Bootstrap 4.6.x版本，需先安装并引入对应样式：

• 安装依赖：

npm install bootstrap@4.6.2

• 在项目入口文件（通常为src/index.js）顶部引入样式：

import 'bootstrap/dist/css/bootstrap.min.css';

2. Navbar属性使用错误

你当前使用的bg="dark" variant="dark"是高版本reactstrap/React Bootstrap适配Bootstrap 5的写法，reactstrap 8.x对应Bootstrap 4的属性为color="dark" dark，同时建议添加expand属性指定导航栏默认展开的屏幕断点，避免大屏下也默认折叠隐藏导航内容。

修改你的Navbar组件代码如下即可：

import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap';

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(
            {/* 替换原有属性，添加expand='md'表示中等以上屏幕默认展开导航 */}
            <Navbar color="dark" dark expand='md'>
                <div className="container">
                    <NavbarToggler onClick={this.toggleNav} />
                    <NavbarBrand href="/">
                        <h1>Navbar</h1>
                    </NavbarBrand>
                    <Collapse isOpen={this.state.isNavOpen} navbar>
                        <Nav navbar>
                            <NavItem>
                                <p className="text-white mb-0">Test</p>
                            </NavItem>
                        </Nav>
                    </Collapse>
                </div>
            </Navbar>
        );
    }
}

export default Header;

额外说明：你可以给NavItem内的文本添加Bootstrap自带的text-white类设置白色文字，mb-0清除p标签默认的下边距，和导航栏样式更适配。

内容的提问来源于stack exchange，提问作者MichaelB