Bootstrap React 中的下拉菜单不起作用

Question

这是我的代码，一切正常，但是当我点击下拉按钮时，它显示一个空白选项，就像下拉菜单中没有可显示的选项一样。

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { DropdownButton, Dropdown } from "react-bootstrap";
import "bootstrap/dist/js/bootstrap.min.js";

const  App=()=> {

  const [cities, setCities] = useState(["agra", "delhi"])

    return (
      <div className="App">
        <h2 className="text-center">Welcome to Nivaran</h2>

        <DropdownButton id="dropdown-basic-button" title="Choose State">
          {cities.map(city => {
            <Dropdown.Item href="#">{city}</Dropdown.Item>
          })}
        </DropdownButton>

      </div>
    );
  }


export default App;

更新：-

回答- 实际上，我知道要做出反应，我不知道 return 我丢失的声明

{cities.map((city) => {
          return <Dropdown.Item href="#">{city}</Dropdown.Item>;
        })}

Answer 1

您错过了下拉菜单中的 return 现在可以使用了

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { DropdownButton, Dropdown } from 'react-bootstrap';
import 'bootstrap/dist/js/bootstrap.min.js';

const App = () => {
  const [cities, setCities] = useState(['agra', 'delhi']);

  return (
    <div className="App">
      <h2 className="text-center">Welcome to Nivaran</h2>

      <DropdownButton id="dropdown-basic-button" title="Choose State">
        {cities.map((city) => {
          return <Dropdown.Item href="#">{city}</Dropdown.Item>;
        })}
      </DropdownButton>
    </div>
  );
};

export default App;

Answer 2

您在绘制城市地图时错过了 return jsx

 {cities.map((city) => {
     return <Dropdown.Item href="#">{city}</Dropdown.Item>;
  })}

或者您可以不使用 return 进行检查，如下所示

 {cities.map(city => 
     <Dropdown.Item href="#">{city}</Dropdown.Item>
 )}

希望对您有用。谢谢！

Bootstrap React 中的下拉菜单不起作用

Bootstrap dropdown in react is not working

reactjs

react-bootstrap