React Bootstrap下拉菜单白边移除及空Div替换问题咨询

一、移除React Bootstrap DropdownButton下拉菜单的白色边框 #

你的CSS未生效是因为没有精准选中Bootstrap下拉菜单的核心元素.dropdown-menu——默认情况下Bootstrap会给这个类添加边框样式。试试以下针对性的CSS覆盖：

/* 覆盖下拉菜单的边框、阴影与背景 */
.Navigation-Bar-Dropdown-Container .dropdown-menu {
  border: none;
  box-shadow: none; /* 若白边是阴影效果则添加此行 */
  background-color: $TopBarBackgroundColour;
}

/* 移除下拉按钮聚焦时的轮廓/阴影 */
.Navigation-Bar-Dropdown-Container .dropdown-toggle:focus {
  outline: none;
  box-shadow: none;
}

如果仍未解决，可通过浏览器开发者工具（F12）选中下拉菜单元素，查看实际生效的样式属性（是border、outline还是box-shadow），再针对性调整选择器和样式值。

二、替换生成大量空Div的写法 #

当前三元表达式的else分支返回空<div></div>会生成无用DOM标签，可通过以下两种方式优化：

方式1：用null替代空Div #

React渲染null时不会生成任何DOM元素，修改代码如下：

{values.map((newItem) => ( 
  <div key={newItem.id}> 
    {newItem.parentId === item.id ? (
      <a className="Navigation-Bar-Sub-Menu-Items-Container" href="#">
        <div className="Sub-Menu-Sub-Menu-Titles">{newItem.title}</div>
        <div className="Sub-Menu-Sub-Menu-Shortcuts">{newItem.shortcutCommand}</div>
      </a>
    ) : null}
  </div>
))}

方式2：先过滤数组再映射（更推荐） #

先筛选出符合条件的项再进行映射，避免生成外层空Div，代码更高效简洁：

{values
  .filter(newItem => newItem.parentId === item.id)
  .map((newItem) => ( 
    <a key={newItem.id} className="Navigation-Bar-Sub-Menu-Items-Container" href="#">
      <div className="Sub-Menu-Sub-Menu-Titles">{newItem.title}</div>
      <div className="Sub-Menu-Sub-Menu-Shortcuts">{newItem.shortcutCommand}</div>
    </a>
  ))
}

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