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

Question

我正在将使用引导程序的静态 HTML 站点转换为 React.js 这里有几个只在 data-target 和 data-toggle 上打开的 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>

我不想使用任何其他npmmodule 来做同样的事情。

我试过了，但没能解决。

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

Answer 1

引导程序 5（2020 年更新）

不再需要 jQuery，因此 Bootstrap 5 更易于在 React 中使用。将新的命名空间data-bs- 属性用作explained here 或，以及this answer 中解释的React 的useEffect useState hooks。

Bootstrap 4（原始问题）

如果你不想使用 jQuery 或 react-bootstrap，你可以创建一个方法来像这样在折叠的导航栏上切换 show 类...

class Navbar extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = { showNav: true };
        this.toggleNav = this.toggleNav.bind(this);
    }
    
    toggleNav() {
        this.setState({ 
            showNav: !this.state.showNav
        })
    }
    
    render() {
        const { showNav } = this.state
        
        return (
        <div className="navbar navbar-expand-lg navbar-light bg-light">
            <a className="navbar-brand" href="#">Navbar</a>
            <button className="navbar-toggler" type="button" onClick={this.toggleNav}>
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className={(showNav ? 'show' : '') + ' collapse navbar-collapse'}>
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item">
                        <a className="nav-link" href="#">Link</a>
                    </li>
                    ...
                </ul>
            </div>
        </div>
        );
    }
}

Example with Navbar Collapse

---

Example with Collapse

Answer 2

// 在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';

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

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