如何在 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 {

    

    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>

        );

    }

}

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

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