下拉菜单无法在 React 中实现答案

【问题标题】：Dropdown not able to implement in React下拉菜单无法在 React 中实现
【发布时间】：2018-09-06 13:03:12
【问题描述】：

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 中，这可以很容易地实现。但是在反应中，我不知道如何进行。

【问题讨论】：

标签： javascript reactjs twitter-bootstrap bootstrap-4

【解决方案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"
},
...

反应应用

        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

【讨论】：

【解决方案2】：

它不起作用，因为您没有导入 jquery 来使用引导程序，而这个元素需要它。

我建议你使用一些 react boostrap 替代品，如下所示：

react-bootstrap dropdown

reactstrap dropdown

【讨论】：