如何在Reactjs中使用数据定向和数据切换？

3qpi33ja 于 2022-12-22 发布在 React

关注(0)|答案(4)|浏览(127)

我正在转换一个静态的HTML站点，它使用bootstrap到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();
}

reactjs

来源：https://stackoverflow.com/questions/59067149/how-to-use-data-target-and-data-toggle-in-reactjs

4条答案

按热度按时间

baubqpgj1#

Bootstrap 5（2020年更新）

不再需要jQuery，因此Bootstrap 5更易于在React中使用。使用新命名空间data-bs-属性explained here * 或 *，并使用React的useEffect useState钩子，如this answer中所述。

引导法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

赞(0）回复(0）举报 2022-12-22

ttp71kqs2#

//在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
注意：我假设你的结构是正确的。

赞(0）回复(0）举报 2022-12-22

cedebl8k3#

把data-toggle改成data-bs-toggle，把data-target改成data-bs-target。我自己找了很久，到处都找不到解决办法，才设法找到这个！

赞(0）回复(0）举报 2022-12-22

jc3wubiy4#

使用新的命名空间数据-bs- attributes，例如。

<button className='btn btn-outline-info btn-block' data-bs-toggle='modal' data-bs-target='#add'> <i className='fas fa-plus'>Add</i> </button>

赞(0）回复(0）举报 2022-12-22

我来回答

如何在Reactjs中使用数据定向和数据切换？

4条答案

相关问题

热门标签

最新问答