Hướng dẫn bootstrap collapse not working in react - bootstrap thu gọn không hoạt động trong phản ứng

5

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang cố gắng sử dụng: Bootstrap 4 Navbar và nó sẽ không sụp đổ trên React. https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

Ai đó có thể giải thích tại sao? Tôi cho rằng điều này có thể là do sẽ cần sửa đổi các thành phần để thay đổi trạng thái? Nhưng nó chỉ là dự đoán của tôi.

import React from "react";
import ReactDOM from "react-dom";

import registerServiceWorker from "./registerServiceWorker";
// styles
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(

, document.getElementById("root"));
registerServiceWorker();

hỏi ngày 14 tháng 1 năm 2018 lúc 11:11Jan 14, 2018 at 11:11

Yaniv peretzyaniv peretzYaniv Peretz

1.0022 Huy hiệu vàng13 Huy hiệu bạc22 Huy hiệu Đồng2 gold badges13 silver badges22 bronze badges

3

Hãy thử thêm bootstrap.js vào import của bạn sau khi bạn nhập jquery:

import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

Đã trả lời ngày 14 tháng 1 năm 2018 lúc 13:26Jan 14, 2018 at 13:26

0

Giải pháp tốt nhất đối với tôi là chỉ nhập tập lệnh Bootstrap sụp đổ.js trong thành phần Navbar để ngăn chặn các tập lệnh trộn JS.

Bao gồm điều này ở đầu thành phần Navbar.jsx của bạn:

import "bootstrap/js/src/collapse.js";

Đã trả lời ngày 28 tháng 4 năm 2019 lúc 12:58Apr 28, 2019 at 12:58

HMAZIADHMAZIADHMaziad

1692 Huy hiệu bạc4 Huy hiệu đồng2 silver badges4 bronze badges

Đơn giản chỉ cần nhập bootstrap.min.js sau bootstrap.min.css

import "bootstrap/dist/js/bootstrap.min.js";

Đã trả lời ngày 8 tháng 11 năm 2020 lúc 19:42Nov 8, 2020 at 19:42

MysticmozmysticmozMysticMoz

Huy hiệu 611 Bạc1 Huy hiệu Đồng1 silver badge1 bronze badge

1

Nếu đó là bootstrap v3, có thể cố gắng thay đổi lớp navbar-toggler thành navbar-toggle.

Trên trang NPM Bootstrap 3.3.7 là phiên bản mới nhất ..

Đã trả lời ngày 14 tháng 1 năm 2018 lúc 13:38Jan 14, 2018 at 13:38

Merkomerkomerko

1.2032 huy hiệu vàng20 Huy hiệu bạc35 Huy hiệu đồng2 gold badges20 silver badges35 bronze badges

1

Nếu bạn sử dụng React, hãy chắc chắn rằng Navbartoggle và Navbarcollapse nằm trong thẻ Navbar

Đã trả lời ngày 17 tháng 8 lúc 11:01Aug 17 at 11:01

za-ekza-ekza-ek

3473 Huy hiệu bạc8 Huy hiệu Đồng3 silver badges8 bronze badges