如何在Reactjs中使用数据目标和数据切换? [英] how to use data-target and data-toggle in Reactjs?

问题描述

我正在将使用引导程序的静态HTML网站转换为React.js 这里有几个仅在data-target和data-toggle上打开的div.

I was converting a static HTML site which uses bootstrap to React.js Here there are several divs which do open only on data-target and 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模块.

I don't want to use any other npmmodule for the same.

我尝试过但是无法解决.

I tried this but was not able to solve.

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

推荐答案

如果您不想使用jQuery或react-bootstrap，则可以创建一种方法来像这样在折叠的Navbar上切换show类. ..

If you don't want to use jQuery or react-bootstrap, you can create a method to toggle the show class on the collapsing Navbar like this...

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>
        );
    }
}

Navbar崩溃的示例

带有折叠的示例

这篇关于如何在Reactjs中使用数据目标和数据切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！