React Bootstrap下拉菜单map遍历不渲染问题排查

你的代码问题出在react-bootstrap Dropdown的结构使用错误：

• 缺少下拉触发按钮<Dropdown.Toggle>，没有这个组件，下拉菜单无法被唤起显示
• 错误地给每个<Dropdown.Item>都套了一个<Dropdown.Menu>，react-bootstrap要求所有菜单项必须放在同一个Menu容器里

修正后的完整代码 #

//import { useEffect, useState } from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "bootstrap/dist/css/bootstrap.min.css";

const tasks = [
  {
    id: 1,
    title: "First Menu",
    content: "This is content 1",
  },
  {
    id: 2,
    title: "Second Menu",
    content: "This is content 2",
  },
  {
    id: 3,
    title: "Third Menu",
    content: "This is content 3",
  },
];
export default function App() {
  return (
    <>
      <TTDDropdown />
    </>
  );
}
function TTDDropdown() {
  return (
    <div>
      <Dropdown>
        {/* 新增下拉触发按钮 */}
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          选择菜单
        </Dropdown.Toggle>
        {/* 所有Item放在同一个Menu里 */}
        <Dropdown.Menu>
          {tasks.map((mytasks) => (
            <Dropdown.Item key={mytasks.id} eventKey={"content-" + mytasks.id}>
              {mytasks.title}
            </Dropdown.Item>
          ))}
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

关键修改说明 #

1. 添加<Dropdown.Toggle>：这是react-bootstrap Dropdown的必填组件，用于触发下拉菜单的显示/隐藏，你可以通过variant属性修改按钮样式，id保证组件唯一性
2. 调整Menu结构：把原来在map里的<Dropdown.Menu>移到外面，只保留一个，所有遍历生成的<Dropdown.Item>都放在这个Menu内部，这样才能正确渲染出下拉菜单列表
3. 移除了无用的react-dropdown/style.css：因为你用的是react-bootstrap的Dropdown，不需要这个第三方样式文件

内容的提问来源于stack exchange，提问作者user654460