Bootstrap崩溃与反应js

Question

嗨,我正在尝试在反应视图中使用bootstrap崩溃,但它无法正常工作.这很简单,但我不明白发生了什么.

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不会为反应组件开箱即用,因为它在加载时解析DOM并附加事件侦听器等.您可以尝试使用react-bootstrap或在componentDidMount生命周期内手动触发.

- 大卫

Answer 2

Bootstrap 5不再需要 jQuery，这使得它更容易与 React 一起使用。例如，这是使用 React useState、useEffect 钩子的 Bootstrap Collapse 组件：

import { useState, useEffect } from React
import { Collapse } from bootstrap

function CollapseDemo() {
    var [toggle, setToggle] = useState(false);
    
    useEffect(() => {
        var myCollapse = document.getElementById('collapseTarget')
        var bsCollapse = new Collapse(myCollapse, {toggle: false})
        toggle ? bsCollapse.show() : bsCollapse.hide()
    })

  return (
    <div className="py-2">
        <button className="btn btn-primary" onClick={() => setToggle(toggle => !toggle)}>
            Toggle collapse
        </button>
        <div className="collapse" id="collapseTarget">
            This is the collapsible content!
        </div>
    </div>
  )
}

演示