复制Bootstrap文档Navbar到React后折叠按钮无法收起求助

问题描述 #

我直接将Bootstrap文档中的Navbar代码复制到React组件中：

export default function Navbar() {
    return (
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#">
                    Navbar
                </a>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item active">
                            <a
                                class="nav-link"
                                href="#"
                                data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show"
                            >
                                Home
                            </a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="#"
                                data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show"
                            >
                                Link
                            </a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link disabled"
                                href="#"
                                data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show"
                            >
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

Navbar预览显示正常，点击折叠按钮可正常展开，但再次点击无法收起。查看元素发现类变为：

<div class="collapse collapsing" id="navbarSupportedContent">

页面无变化。本地已安装Bootstrap 5.2，其他Bootstrap功能及折叠组件均可正常使用，请问问题出在哪？

问题原因及解决方法 #

• 问题根源：导航链接上添加的data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show"属性干扰了Navbar折叠组件的状态切换逻辑。点击导航链接时触发的折叠操作会打乱组件状态，导致折叠按钮无法正确完成收起动作。

• 基础修复方案：

  1. 移除所有导航链接上的data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show"属性，这些属性属于多余配置，Navbar原生折叠逻辑无需通过导航链接触发收起。
  2. 替换React中的class属性为className，符合React语法规范（虽非折叠问题直接原因，但建议修正）。

修改后的代码示例：

export default function Navbar() {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container">
                <a className="navbar-brand" href="#">
                    Navbar
                </a>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav me-auto">
                        <li className="nav-item active">
                            <a
                                className="nav-link"
                                href="#"
                            >
                                Home
                            </a>
                        </li>
                        <li className="nav-item">
                            <a
                                className="nav-link"
                                href="#"
                            >
                                Link
                            </a>
                        </li>
                        <li className="nav-item">
                            <a
                                className="nav-link disabled"
                                href="#"
                            >
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

• 进阶需求实现：如果需要点击导航链接后自动收起Navbar，可通过React状态管理手动控制折叠状态，示例代码如下：

import { useState } from 'react';

export default function Navbar() {
    const [isCollapsed, setIsCollapsed] = useState(true);

    const handleLinkClick = () => {
        setIsCollapsed(true);
    };

    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container">
                <a className="navbar-brand" href="#">
                    Navbar
                </a>
                <button
                    className="navbar-toggler"
                    type="button"
                    onClick={() => setIsCollapsed(!isCollapsed)}
                    aria-controls="navbarSupportedContent"
                    aria-expanded={!isCollapsed}
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className={`collapse navbar-collapse ${!isCollapsed ? 'show' : ''}`} id="navbarSupportedContent">
                    <ul className="navbar-nav me-auto">
                        <li className="nav-item active">
                            <a
                                className="nav-link"
                                href="#"
                                onClick={handleLinkClick}
                            >
                                Home
                            </a>
                        </li>
                        <li className="nav-item">
                            <a
                                className="nav-link"
                                href="#"
                                onClick={handleLinkClick}
                            >
                                Link
                            </a>
                        </li>
                        <li className="nav-item">
                            <a
                                className="nav-link disabled"
                                href="#"
                                onClick={handleLinkClick}
                            >
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

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