Bootstrap 用 React js 崩溃

Question

您好，我正在尝试在 React 视图中使用 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 生命周期内触发。

– David

Answer 2

我以前经历过。您需要做的就是在 componentDidMount 中手动触发事件。您可能还想在 setState 的回调中重新触发事件。

Answer 3

如果你不想和jQuery混为一谈:

首先，为每个可折叠元素构建一个 ref 对象；还构建了一个函数来将 .show CSS class 切换到相应的元素。

然后，在按钮中使用切换器功能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>
    )
  }
}

Answer 4

使用 npm 安装模块

npm install react-bootstrap bootstrap

并导入您的组件

import 'bootstrap/dist/css/bootstrap.min.css';

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

这对我有用

Answer 5

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

Demo

Answer 6

想在这里添加更新。使用 React 的更新版本，您不仅不需要像 document.getElementById() 这样的原始代码，而且您也不需要 refs 或 jQuery。您可以像这样简单地导入 collapse：

import Collapse from 'react-bootstrap/Collapse'

用这个组件可以很容易地完成折叠过渡，如docs所示。这是从相同的代码中提取的代码：

const {useState} = React;

const Example = () => {

  const [toggle, setToggle] = useState(false);
  const toggleFunc = React.useCallback(() => setToggle(!toggle));

  return (
    <div>
      <button onClick={toggleFunc}>Toggle Collapse</button>
      <ReactBootstrap.Collapse in={toggle}>
          <div>
             Stuff to collapse
          </div>
      </ReactBootstrap.Collapse>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="react"></div>

** 注意： 显然，此代码已修改为与 SO 上的代码片段一起使用。如果您在本地环境中工作，请使用文档中的代码，它更简洁。

Bootstrap 用 React js 崩溃

Bootstrap collapse with react js

twitter-bootstrap

reactjs

bootstrap-5