如何在Reactjs中使用data-target和data-toggle？

Question

我正在将一个HTML使用 bootstrap 的静态站点转换为 React.js 这里有几个 div 仅在 data-target 和 data-toggle 上打开。

<div className="card-header" id="headingFive">
   <h5 className="mb-0">
      <button
            className="btn btn-link"
            type="button"
            data-toggle="collapse"
            data-target="#collapseFive"
            aria-expanded="true"
            aria-controls="collapseOne">
            Site Wide Events
      </button>
    </h5>
</div>

<div
   id="collapseFive"
   className="collapse show"
   aria-labelledby="headingFive"
   data-parent="#accordionThree">
    <div className="card-body">
        <div className="row">
            <div className="col wall">
                <h4 className="text-center">12</h4>
                <p className="text-center">Target</p>
            </div>
            <div className="col">
                <h4 className="text-center">13</h4>
                <p className="text-center">Actual</p>
            </div>
        </div>
    </div>
</div>

我不想使用任何其他npm模块来实现相同的目的。

我尝试了这个但无法解决。

componentDidUpdate() {
    $('.collapse').bootstrapToggle();
}

Answer 1

// 将以下内容导入到您的App.js

import 'jquery/dist/jquery.min.js'; // Have to install and import jQuery because of bootstrap modal's dependency
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Bootstrap 依赖https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

注意：我假设您的结构是正确的。