单击图标时的下拉菜单-ReactJS答案

【问题标题】：Drop down menu when click on the icon- ReactJS单击图标时的下拉菜单-ReactJS
【发布时间】：2020-11-29 10:23:54
【问题描述】：

我有一个Navbar，我使用的条件是，如果userstatus 为真（即用户已登录），那么它将显示user-icon，否则signin，我希望在单击时实现该目标在user-icon 或singin 中，它将显示下拉菜单，稍后我将在其中使用它作为注销按钮。我正在努力寻找如何实现这一目标，我可以在https://react-bootstrap.github.io/components/dropdowns/ 看到我可以实现但在这里我想使用我的own icon(glyphicon glyphicon-user) 而不是rectangle box。

我希望实现以下目标，但我希望使用user-icon 而不是Dropdown button

请提供任何建议/指针。

-代码片段

 <li>
             <a className="active" href="/signin">
               {userstatus ? (
                 <a
                   className=" signin-icon glyphicon glyphicon-user    
   "
                 ></a>
               ) : (
                 <a>SIGNIN</a>
               )}
             </a>
             
</li>

【问题讨论】：

标签： javascript css reactjs bootstrap-4 react-bootstrap

【解决方案1】：

有多种方法可以实现这一目标。一点点谷歌搜索将揭示很多这些方式。但是，您可以通过使用 div 并在其中包含菜单项和菜单按钮来使用纯 css 执行此操作。只要父 div 没有悬停，菜单项就会保持隐藏状态。

.dropdown {
  width: 100px;
  background: purple;
}
.dropdown .item {
  display: none;
}

.dropdown:hover .item{
  display: block;
}

<div class="dropdown">
<button>
Button
</button>
<div class="item">
<p>
item 1
</p>
</div>
</div>

【讨论】：

【解决方案2】：

根据您提到的上述链接，您可以在此处更改：

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    {* you icon code here *} (//in my case I used <FaBeer /> )
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

并在 Dropdown.Menu 标记中更改您想要的操作

【讨论】：

【解决方案3】：

我不推荐的第一个解决方案是超越引导 css，这将是很多你不需要从休息所有 css 和 !important alot css 开始的喧嚣

第二个选择是使用你自己的下拉菜单，我发现它比以前的所有解决方案更容易。

如果你正在为 ex 使用 react 钩子：

const [isDropdownOpend , setDropdownOpen ] = useState(false);
const [list , setList] = useState([1,2,3])
const toggleDropDown = () => setDropdownOpend = !isDropdownOpend
const DropDownlist = () =>  useMemo(() =>list.map(el=><div>el</div>)
return (
<>
<button class="signin-icon glyphicon glyphicon-user  " onClick={toggleDropDown}>
{isDropdownOpend  ?DropDownlist():false}
</>
)

【讨论】：

谢谢 Aly，请您解释一下const DropDownlist = () => useMemo(() =>list.map(el=><div>el</div>)，因为我很难理解它是如何在这里工作的。以及为什么我们在此代码行中需要两个箭头函数。
据我了解，第一个箭头函数 const DropDownlist = () => 是用户单击时的回调，最后一个箭头函数是 () =>list.map(el=><div>el</div>) 是 .map 函数在列表的每个元素中迭代，但什么是中间箭头函数() => useMemo(...)的原因，代码也不起作用（下拉菜单不显示）不确定它是否仍然缺少某些东西。
第一次回调是的，你是对的，你可以删除额外的回调()=>，对于你遇到的错误，请给我更多的细节
我已经实现了上面的代码，但是useMemo(说它不是定义的，不是用户你在这里如何使用它
只需导入它` import { useMemo } from 'react' `

【解决方案4】：

在此处添加这些类

<Dropdown.Toggle variant="light" className="bg-white border-0 p-0" variant="success" id="dropdown-basic">
    <ADD YOUR ICON HERE>
  </Dropdown.Toggle>

css

.dropdown-toggle:after {
   border: 0;
}

【讨论】：