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"
},
...

反应应用

        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 Boostrap替代方法，如下所示：

react-bootstrap dropdown

reactstrap dropdown

下拉菜单无法在React中实现

2 个答案: