引导切换按钮在 reactjs 中不起作用

Question

我正在使用引导程序进入 reactjs，但我的切换按钮不起作用。我没有添加 jquery 的脚本，因为我在顶部导入引导程序。它应该只在小型设备上显示和工作。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const Navbar = () => {

    return (
<div>
            <nav className="navbar navbar-expand-sm navbar-light bg-light">
                <div className="container">
                    <a className="home-style navbar-brand" href="/">PORTFOLIO</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>

                    <div className="collapse navbar-collapse " id="navbarNav">
                        <ul className="navbar-nav ml-auto">
                            <a className="btn-style nav-item nav-link" href="/">HOME <span className="sr-only">(current)</span></a>
                            <li >
                                <a className="btn-style nav-item nav-link" href="/about">MY STORY</a>
                            </li>
                            <li >
                                <a className="btn-style nav-item nav-link" href="/work">WORK</a>
                            </li>
                            <li >
                                <a className="btn-style nav-item nav-link" href="/projects">PROJECTS</a>
                            </li>
                            <li >
                                <a className="btn-style nav-item nav-link" href="/contact">CONTACT</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </nav>

        </div>
)
}

export default Navbar;

Answer 1

我需要在 index.js 中导入 Jquery。也使用没有 Jquery 的 react-bootstrap 工作。谢谢大家

Answer 2

我会看看这个 - https://react-bootstrap.github.io/。我最近构建了一个简单的小应用程序，并使用它来避免使用带有 React 的引导程序出现问题。

代码如下所示：

import React, {Component} from "react";
import "./App.css";
import 'bootstrap/dist/css/bootstrap.min.css';

import MediaQuery from "react-responsive";
import SpotifyWebApi from "spotify-web-api-js";
import { Base64 } from 'js-base64';

import Jumbotron from 'react-bootstrap/Jumbotron'
import {Button} from 'react-bootstrap';
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'


<div className="App">
                <Container>
                    <Row>
                            <Col className = "autoCenter">
                                <Jumbotron className = "backgroundColor">
                                  <h1>Hello, friend!</h1>
                                  <div>
                                    Hello
                                  </div>
                                  <div className = "mt3">
                                   text
                                  </div>
                                  <div>
                                    <Button
                                        className="spotifyGreen mt4 f6 dim br-pill"
                                        href = "">
                                            button
                                    </Button>
                                  </div>
                                </Jumbotron>
                            </Col>
                    </Row>
                </Container>
</div>

我遗漏了很多东西，但希望对语法有所帮助！