Bootstrap Dropdown 在 React 中不起作用

Question

我在 bootstrap Dropdowns 中包含了一个用于 React 的下拉按钮，但它不起作用并显示为普通按钮。你能给我一个解决方案吗？

<div className="dropdown">
    <button className="btn btn-secondary 
                 dropdown-toggle" 
                 type="button" 
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
                 aria-haspopup="true" 
                 aria-expanded="false">
                 Dropdown button
    </button>
            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a className="dropdown-item" href="#">Action</a>
                <a className="dropdown-item" href="#">Another action</a>
                <a className="dropdown-item" href="#">Something else here</a>
            </div>
</div>

输出是一个像这样的普通按钮。

Answer 1

没有popper.js和 ，下拉菜单不起作用jquery.js。

所以请安装popper.js并jquery.js在您的系统中使用npm install popper.js jquery --save，不要忘记包含它。

有CDN

https://stackblitz.com/edit/create-react-class-m3qfxu?file=index.html

使用 NPM

https://stackblitz.com/edit/create-react-class-xvsthx?file=index.js