React.js 中的引导程序 - 导航栏折叠不起作用答案

【问题标题】：Bootstrap in React.js - Navbar collapse doesn't workReact.js 中的引导程序 - 导航栏折叠不起作用
【发布时间】：2021-04-21 03:19:33
【问题描述】：

我遇到了这个问题，当尝试使用 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();

【问题讨论】：

您确定要导入 Bootstrap JS 吗？ 'bootstrap/dist/js/bootstrap.bundle.min.js' 也许？
制作一个工作示例，以便任何人都可以更好地理解，您可以使用codesandbox

标签： javascript css reactjs bootstrap-4

【解决方案1】：

首先，你有一些类应该被转换成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;

另外我建议使用功能组件，应该是一个简单的改变：

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;

【讨论】：