Twitter bootstrap 使用react js进行引导折叠

嗨，我试图在react视图中使用引导折叠，但它不起作用。这很简单，但我不明白发生了什么

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>);

返回(
按钮点击这个！
…无稽之谈
);

对于react组件，引导不会立即起作用，因为它会在加载时解析DOM并附加事件侦听器等。您可以在componentDidMount生命周期内尝试类似或手动触发的操作

---

–

我以前经历过这种情况。您只需在componentDidMount内手动触发事件。您可能还希望重新触发setState回调中的事件

如果你不想在jQuery上捣乱：

首先，为每个可折叠元素构建一个ref对象；还可以构建一个函数，将

.show

CSS类切换到相应的元素

然后，在按钮

onClick

中使用切换功能

class Collapse extends React.Component {
  constructor(props) {
    super(props)

    this.refs = {}

    // build ref object with collapsible elements ids
    this.setRef = (element) => {
      this.refs[element.id] = element
    }

    // toggle "show" CSS class using plain JS
    this.collapseRef = (id) => {
      if (this.refs) this.refs[id].classList.toggle('show')
    }        
  }

  render() {
    return (
      <div>
        <button
          type="button"
          onClick={() => this.collapseRef('content1')}
        >
          Collapse!
        </button>
        <div
          className="collapse"
          // Use the `ref` callback to store a reference to the collapsible DOM element
          ref={this.setRef}
          id="content1"
        >
          Collapsible content
        </div>
      </div>
    )
  }
}

类折叠扩展了React.Component{
建造师（道具）{
超级（道具）
this.refs={}
//具有可折叠元素ID的build ref对象
this.setRef=（元素）=>{
this.refs[element.id]=元素
}
//使用普通JS切换“显示”CSS类
this.collapseRef=（id）=>{
if（this.refs）this.refs[id].classList.toggle（'show'）
}        
}
render（）{
返回(
this.collapseRef（'content1'）}
>
崩溃
可折叠内容物
)
}
}

安装带有npm的模块

npm安装反应引导引导引导

并在组件中导入

导入'bootstrap/dist/css/bootstrap.min.css'

导入'bootstrap/dist/js/bootstrap.min.js'

这项工作对我来说
Bootstrap 5不再需要jQuery，这使得它更容易与React一起使用。例如，下面是使用React-useState、useEffect挂钩的引导折叠组件：

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>
  )
}

从React导入{useState，useffect}
从引导导入{Collapse}
函数CollapseDemo（）{
var[toggle，setToggle]=useState（false）；
useffect（（）=>{
var myCollapse=document.getElementById（'collapseTarget'）
var bsCollapse=新折叠（myCollapse，{toggle:false}）
切换？bsCollapse.show（）：bsCollapse.hide（）
})
返回(
setToggle（toggle=>！toggle）}>
切换折叠
这是可折叠的内容！
)
}

对于react组件，引导不会立即起作用，因为它会在加载时解析DOM并附加事件侦听器等。您可以在componentDidMount生命周期内尝试类似或手动触发的操作。谢谢！我把大卫的答案贴成CW，所以有些东西可以接受。这太棒了！我想知道如何使用多个可折叠元素来实现这一点。例如，我有一个由可单击行组成的表，每个行都显示自己的子表。