Bootstrap 崩溃与 react js [英] Bootstrap collapse with react js

问题描述

我正在尝试在 React 视图中使用 bootstrap 折叠，但它不起作用.这很简单，但我不明白发生了什么.

return (
<button className="btn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">按钮点击这个！<div className="collapse" id="collapseExample"><div className="well">...blablabla内容

);

解决方案

Bootstrap 不适用于 React 组件，因为它在加载时解析 DOM 并附加事件侦听器等.您可以尝试类似 react-bootstrap 或在 componentDidMount 生命周期内手动触发.

– 大卫

Hi I'm trying to use bootstrap collapse inside a react view and it's not working. It's very simple but I don't understand what's going on.

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

解决方案

Bootstrap will not work out of the box for react components, since it parses the DOM on load and attaches event listeners etc. You can try something like react-bootstrap or manually triggering inside the componentDidMount lifecycle.

– David

这篇关于Bootstrap 崩溃与 react js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！