反应中的引导下拉菜单不起作用答案

【问题标题】：Bootstrap dropdown in react is not working反应中的引导下拉菜单不起作用
【发布时间】：2023-03-30 11:40:02
【问题描述】：

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

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>;
        })}

【问题讨论】：

@deepak 浏览此博客后包含 5 个答案，希望对您有用 :) Blog Link
我在下面提到了答案，它会起作用
谢谢Sumit Gajera，但我的情况不同，下拉没有问题，因为当我使用不带地图的下拉时，它可以工作，但不能与地图一起工作
查看更多Bootstrap Dropdown - stackoverflow

标签： reactjs react-bootstrap

【解决方案1】：

您在下拉菜单中错过了返回，现在它可以工作了

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;

【讨论】：

【解决方案2】：

你在绘制城市地图时错过了返回的 jsx

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

或者你可以像下面这样检查而不返回

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

我希望它对你有用。谢谢！

【讨论】：

谢谢，其实我知道反应，我不知道return语句
也可以不用return语句映射。