reactjs - Bootstrap 用 react js 崩溃

Question

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

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

score 12 · Accepted Answer

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

–大卫

score 7 · Accepted Answer

Bootstrap 5不再需要 jQuery，这使得它更容易与 React 一起使用。例如，这是使用 React useState、useEffect hooks 的 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>
  )
}

演示

score 1 · Accepted Answer

如果你不想弄乱 jQuery：

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

使用 npm 安装模块

npm install react-bootstrap bootstrap

并导入您的组件

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

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

这对我有用

score 0 · Accepted Answer

想我会在这里添加一个更新。使用更新版本的 React，您不仅不需要像document.getElementById(). 您可以像这样简单地导入折叠：

import Collapse from 'react-bootstrap/Collapse'

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

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 上的代码片段一起使用。如果您在本地环境中工作，请使用文档中的代码，这样更简洁。

reactjs - Bootstrap 用 react js 崩溃

6 回答 6

Related

Reference