即使代码与 Bootstrap 网站完全相同，Bootstrap V4 Accordion 也没有动画

Question

我正在尝试实现引导手风琴。

正在使用 V5，但无法正常工作，已降级到 v4（没什么大不了的），但仍然无法正常工作。

什么都试过了，没有动画（折叠和显示）然后竟然从引导网站复制代码，仍然没有动画。

也没有得到控制台错误。 我认为我不需要使用 onClick，因为它应该能够在没有但无法获取的情况下显示/折叠。

代码：

<div className="accordion" id="accordionExample">
                <div className="card">
                    <div className="card-header" id="headingOne">
                        <h2 className="mb-0">
                            <button className="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" className="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div className="card-body">
                            Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> className.
                        </div>
                    </div>
                </div>
            </div>

可能是依赖冲突？

package.json 依赖：

 "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/core": "^4.11.4",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "4.6.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-credit-cards": "^0.8.3",
    "react-dom": "^17.0.2",
    "react-facebook-login": "^4.1.1",
    "react-google-button": "^0.7.2",
    "react-responsive-modal": "^6.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux-persist": "^6.0.0",
    "sass": "^1.35.1",
    "styled-components": "^5.3.0",
    "swiper": "^6.7.1",
    "web-vitals": "^1.0.1"

Answer 1

在反应中你必须使用react-bootstrap 库。

记住也要做这部分：

{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';