[英]Bootstrap in React.js - Navbar collapse doesn't work
我遇到了这个问题,当尝试使用 Bootstrap 中的导航栏折叠按钮时,它不起作用。
我认为这与我的页面加载 jQuery 库或其他内容有关,尽管我不明白。 在节点模块中,我找到了所有引导 js 文件。 我还将它们导入到我的 index.js 文件中。
这是我的代码。
import React, {Component} from 'react';
import AuthenticationService from '../service/AuthenticationService';
import { Sitemap } from '../settings/Sitemap';
class NavigationComponent extends Component {
render() {
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container">
<a href="/" className="navbar-brand">Fit Vision</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggler" aria-controls="toggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggler">
<ul className="navbar-nav">
{Sitemap.map((item, index) => {
return (
<li className="nav-item" key={index}>
<a className="nav-link" href={item.url}>{item.title}</a>
</li>
)
})}
</ul>
<ul className="navbar-nav justify-content-end">
<li className="nav-item">
<a className="nav-link" href="/login">Login</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/" onClick={AuthenticationService.logout}>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default NavigationComponent;
我的 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
首先,你有一些类应该被转换成className。 其次,你应该知道bootstrap依赖于jquery。 请在npm install jquery
。
现在查看 index.js 文件,您应该导入下一个文件:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle';
您的 Navigation.js 应如下所示:
import React, {Component} from 'react';
import AuthenticationService from '../service/AuthenticationService';
import { Sitemap } from '../settings/Sitemap';
class NavigationComponent extends Component {
render() {
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container">
<a href="/" className="navbar-brand">Fit Vision</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggler" aria-controls="toggler" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="toggler">
<ul className="navbar-nav">
{Sitemap.map((item, index) => {
return (
<li className="nav-item" key={index}>
<a className="nav-link" href={item.url}>{item.title}</a>
</li>
)
})}
</ul>
<ul className="navbar-nav justify-content-end">
<li className="nav-item">
<a className="nav-link" href="/login">Login</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/" onClick={AuthenticationService.logout}>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default NavigationComponent;
另外我建议使用 function 组件,这应该是一个简单的改变:
import React from 'react';
import AuthenticationService from '../service/AuthenticationService';
import { Sitemap } from '../settings/Sitemap';
function NavigationComponent() {
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container">
<a href="/" className="navbar-brand">Fit Vision</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggler" aria-controls="toggler" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="toggler">
<ul className="navbar-nav">
{Sitemap.map((item, index) => {
return (
<li className="nav-item" key={index}>
<a className="nav-link" href={item.url}>{item.title}</a>
</li>
)
})}
</ul>
<ul className="navbar-nav justify-content-end">
<li className="nav-item">
<a className="nav-link" href="/login">Login</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/" onClick={AuthenticationService.logout}>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
export default NavigationComponent;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.