如何在 Reactjs 中使用数据目标和数据切换？

Question

我正在将HTML使用引导程序的静态站点转换为 React.js 这里有几个 div 仅在数据目标和数据切换上打开。

<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

引导程序 5（2020 年更新）不再需要 jQuery，因此 Bootstrap 5 更易于在 React 中使用。使用此处解释的新命名空间data-bs-属性，或者使用 React 的 useEffect useState 钩子，如本答案中所述。Bootstrap 4（原始问题）如果您不想使用 jQuery 或 react-bootstrap，您可以创建一个方法来show像这样在折叠的导航栏上切换类...class Navbar extends React.Component {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = { showNav: true };&nbsp; &nbsp; &nbsp; &nbsp; this.toggleNav = this.toggleNav.bind(this);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; toggleNav() {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showNav: !this.state.showNav&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const { showNav } = this.state&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="navbar navbar-expand-lg navbar-light bg-light">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a className="navbar-brand" href="#">Navbar</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="navbar-toggler" type="button" onClick={this.toggleNav}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className="navbar-toggler-icon"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={(showNav ? 'show' : '') + ' collapse navbar-collapse'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul className="navbar-nav mr-auto">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a className="nav-link" href="#">Link</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}

Answer 2

// 将以下内容导入您的 App.jsimport 'jquery/dist/jquery.min.js'; // Have to install and import jQuery because of bootstrap modal's dependencyimport 'bootstrap/dist/css/bootstrap.min.css';import 'bootstrap/dist/js/bootstrap.bundle.min.js';引导依赖https://getbootstrap.com/docs/4.0/getting-started/introduction/#js注意：我假设您的结构是正确的。