如何使用 Bootstrap 在 Reactjs 中使用数据切换折叠?
[英] How to use data toggle collapse in Reactjs with Bootstrap?
本文介绍了如何使用 Bootstrap 在 Reactjs 中使用数据切换折叠?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在将纯 Bootstrap 与 Reactjs 一起使用,并且我使用 Bootstrap 组件构建了一个导航栏,但我面临的问题是数据切换折叠不起作用.
当我缩小显示视图大小时,汉堡包图标变得可见,但是当我点击它时,什么也没有发生.虽然它适用于纯 HTML 和 JS,但不适用于 reactjs.
这里是 index.js 文件
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';从反应"导入反应;从 'react-dom' 导入 ReactDOM;导入'./index.css';从'./App'导入应用程序;从 './registerServiceWorker' 导入 registerServiceWorker;ReactDOM.render(, document.getElementById('root'));注册服务工作者();
这里是 app.js
import React, { Component } from 'react';导入'./App.css';从'./components/navBar/navBar'导入导航栏;类 App 扩展组件 {使成为() {返回 (<div><导航栏/>
);}}导出默认应用程序;
这里是 NavBar.js 文件
import React, { Component } from 'react';类导航栏扩展组件{使成为() {返回 (<div><nav className="navbar navbar-expand-lg navbar-light bg-light"><a className="navbar-brand" href="/">Navbar</a><button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle导航"><span className="navbar-toggler-icon"></span>按钮><div className="collapse navbar-collapse" id="navbarNavAltMarkup"><div className="navbar-nav"><a className="nav-item nav-link active" href="/">Home
</nav>
);}}导出默认导航栏;
这是我用于导航栏的完整代码.
解决方案
Bootstrap 菜单切换是一个 JS 功能.将 Bootstrap 的 JS 部分与 ReactJS 混合使用并不是一个好主意,因为这两个库都操作 DOM,并且会导致更大的问题.
我建议实现您需要的小功能.大多数菜单切换只是类切换.
import React, { Component } from "react";导出默认类菜单扩展组件{构造函数(道具){超级(道具);this.state = {菜单:假};this.toggleMenu = this.toggleMenu.bind(this);}切换菜单(){this.setState({ 菜单: !this.state.menu })}使成为() {const show = (this.state.menu) ?显示":";返回 (<nav className="navbar navbar-expand-lg navbar-light bg-light"><a className="navbar-brand";href=/">导航栏</a><button className="navbar-toggler";类型=按钮"onClick={ this.toggleMenu }><span className="navbar-toggler-icon"></span>按钮><div className={"collapse navbar-collapse "+ 显示}><div className="navbar-nav"><a className="nav-item nav-link active";href=/">首页
</nav>);}}
I am using pure Bootstrap with Reactjs and I have build a navBar using Bootstrap component but the problem I am facing is with data toggle collapse it is not working.
When I shrink my display view size then the hamburger icon becomes visible but when I click on it then nothing happens. While it works perfect with pure HTML and JS but not working with reactjs.
Here is index.js file
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Here is app.js
import React, { Component } from 'react';
import './App.css';
import NavBar from './components/navBar/navBar';
class App extends Component {
render() {
return (
<div>
<NavBar />
</div>
);
}
}
export default App;
here is NavBar.js file
import React, { Component } from 'react';
class NavBar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="/">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a className="nav-item nav-link" href="/">Features</a>
<a className="nav-item nav-link" href="/">Pricing</a>
<a className="nav-item nav-link" href="/">logout</a>
</div>
</div>
</nav>
</div>
);
}
}
export default NavBar;
This is complete code I have used for navBar.
解决方案
Bootstrap menu toggle is a JS functionality. It's not a good idea to mix the JS part of Bootstrap with ReactJS, since both libraries manipulate the DOM and it can lead to bigger problems.
I suggest implementing the small functionality you need. Most of the menu toggle is just a class toggle thing.
import React, { Component } from "react";
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
menu: false
};
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu(){
this.setState({ menu: !this.state.menu })
}
render() {
const show = (this.state.menu) ? "show" : "" ;
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="/">Navbar</a>
<button className="navbar-toggler" type="button" onClick={ this.toggleMenu }>
<span className="navbar-toggler-icon"></span>
</button>
<div className={"collapse navbar-collapse " + show}>
<div className="navbar-nav">
<a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a className="nav-item nav-link" href="/">Features</a>
<a className="nav-item nav-link" href="/">Pricing</a>
<a className="nav-item nav-link" href="/">logout</a>
</div>
</div>
</nav>
);
}
}
这篇关于如何使用 Bootstrap 在 Reactjs 中使用数据切换折叠?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!