reactjs - 如何使用 React 为 Bootstrap 启用切换

Question

我正在尝试在我的反应应用程序中使用引导程序（特别是来自 bootswatch 的主题）。如果这已在其他地方得到回答，我很抱歉，但我已经搜索了几个小时的答案无济于事。

现在，在较小的屏幕上，引导导航栏折叠成汉堡菜单。当我单击它时，没有任何反应。当我使用材质 UI 时，我必须创建一个抽屉元素并将其 open-property 设置为当前状态，并使用单击处理程序来更改该状态。

<Drawer open={this.state.isOpen} onClose={this.handleDrawerClose}>

我是否需要为引导程序做类似的事情，在这种情况下，我应该更改哪个属性？目前我的导航栏看起来像这样：

import React, { useState } from 'react';

export default function Navbar() {
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
            <a className="navbar-brand ml-3" href="#">
                Cocktail Nightz
            </a>
            <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbar-toggle"
                aria-controls="nav-content"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span className="navbar-toggler-icon" />
            </button>

            <div className="collapse navbar-collapse" id="navbar-toggle">
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                        <a className="nav-link" href="#">
                            Home <span className="sr-only">(current)</span>
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">
                            Cocktail
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">
                            Meal
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">
                            About
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    );
}

我真的很感激任何帮助！

标签： reactjsbootstrap-4