下拉无法在React中实现

Question

import React, { Component } from "react";
import { Route, BrowserRouter } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import axios from 'axios';
import Home from "./Home";
import Shop from "./Shop";
import About from "./About";

import Footer from "./components/Footer";
import Banner from "./components/Banner";



class Main extends Component {

  state = {
    topCategory: []
  }

  componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
      .then(res => {
        console.log(res.data.express.catalogGroupView);
        this.setState({
          topCategory: res.data.express.catalogGroupView
        })
      })
  }

  render() {

    const { topCategory } = this.state;
    const navList = topCategory.map(navList => {

      return (

          <li><button className="btn btn-primary dropdown-toggle" data-toggle="dropdown">{navList.name}</button></li>

        )

    })

    return (
      <div>

      <ul className="header">{navList}</ul>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
      <h2>Lorem Ipsum</h2>
      <p>Cras facilisis urna ornare ex volutpat, et
         convallis erat elementum. Ut aliquam, ipsum vitae
         gravida suscipit, metus dui bibendum est, eget rhoncus nibh
         metus nec massa. Maecenas hendrerit laoreet augue
         nec molestie. Cum sociis natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus.</p>
      <Banner />
      <Footer />
      </div>

    )

  }


}

export default Main;

我是新手做出反应，我尝试过设计一个主页。导航从外部API端点填充。但是，当我点击特定链接（如服饰，电子等）时，会出现一个我无法实现的下拉列表。有人可以帮我这个。我知道在普通的HTML中，这可以很容易地实现。但在反应中，我不知道如何继续。

Answer 1

您需要导入Bootstrap。确保包含Bootstrap依赖项（popper和jquery）......

的package.json

...  
"dependencies": {
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "jquery": "^3.3.1",
    "bootstrap": "^4.1.3",
    "popper.js": "^1.14.3"
},
...

反应app

        import React from "react";
        import ReactDOM from "react-dom";

        /* this imports the Bootstrap js */
        import bootstrap from "bootstrap";
        /* this imports the Bootstrap css */
        import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
        ...

工作沙箱：https://codesandbox.io/s/r774l05qo4

Answer 2

它不起作用，因为你没有导入jquery来使用bootstrap，而这个元素需要它。

我建议你使用一些反应引导替代品，如下所示：

react-bootstrap dropdown

reactstrap dropdown