Sự sụp đổ của Bootstrap với phản ứng js

Question

Xin chào, tôi đang cố gắng sử dụng sự sụp đổ của bootstrap bên trong một khung nhìn phản ứng và nó không hoạt động. Nó rất đơn giản nhưng tôi không hiểu chuyện gì đang diễn ra.

return (<div> 
    <button className="btn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample"> 
     ButtonClickthis! 
    </button> 
    <div className="collapse" id="collapseExample"> 
     <div className="well"> 
      ...blablablacontent 
     </div> 
    </div> 
</div>); 

Answer 1

Bootstrap sẽ không làm việc ra khỏi hộp cho phản ứng linh kiện, vì nó phân tích DOM vào tải và gắn nghe sự kiện vv Bạn có thể thử một cái gì đó giống như react-bootstrap hoặc bằng tay kích hoạt bên trong vòng đời componentDidMount.

- David

Answer 2

Tôi đã trải nghiệm điều này trước đây. Tất cả những gì bạn cần làm là kích hoạt các sự kiện bằng tay bên trong componentDidMount. Bạn cũng có thể muốn kích hoạt lại các sự kiện trong callback của setState.

Answer 3

Một điểm đáng nói: Nếu bạn đang sử dụng này trong một bối cảnh NPM/ES6 -

Bạn muốn nhập jquery đầu tiên và thiết lập biến window.jQuery thusly, trước khi bạn nạp bootstrap:

import $ from 'jquery'; 
window.jQuery = $; 
import bootstrap from 'bootstrap'; 

Ít nhất tôi phải làm điều này để tải bootstrap.

Nói chung, tôi tin rằng nó là thích hợp hơn để đi với các thành phần đã được chuyển đổi sang thế giới React đã có trong dự án phản ứng-bootstrap. Nhưng trong trường hợp này (Thu gọn), nó vẫn chưa được chuyển đổi.