React.js 中的引導程序 - 導航欄折疊不起作用

Question

我遇到了這個問題，當嘗試使用 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();

Answer 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;

另外我建議使用 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;