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

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

Bootstrap 5(2020 年更新)
不再需要 jQuery，因此 Bootstrap 5 更易于在 React 中使用。使用新的命名空间 data-bs- 属性作为 explained here 或使用 React 的 useEffect useState 钩子(Hook)，如 this answer 中所述。
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