Javascript 加载react引导程序'；在React功能组件中，鼠标悬停时的下拉数据比鼠标单击时的下拉数据？

我需要打开下拉菜单，并在鼠标悬停而不是单击时加载下拉菜单项

目前我的代码如下：

函数导航（）{
常量[isOpen，setIsOpen]=useState（false）；
返回(
setIsOpen（真）}
onMouseLeave={（）=>setIsOpen（false）}
show={isOpen}
>
我们是谁
我们如何工作
所获证书
setIsOpen（真）}
onMouseLeave={（）=>setIsOpen（false）}
show={isOpen}
>
云数字转型
专家云建议和支持
软件开发
专责小组
setIsOpen（真）}
onMouseLeave={（）=>setIsOpen（false）}
show={isOpen}
>
销售额
支持
)
}

---

但是，当我将鼠标悬停在导航栏中的项目上时，当我将鼠标悬停在其中任何一个项目上时，将同时显示所有三个导航下拉列表中的所有项目。有人能帮我解决这个问题吗？我应该传递什么属性来实现这一点？

您应该像这样重构功能组件：

function Navigation() {

  const [shouldOpen, show] = useState(false);

  return (
    <NavDropdown 
       title="About"
       onMouseEnter = { () => show(true) }
       onMouseLeave = { () => show(false) }
       show={ this.shouldOpen }>
      <NavDropdown.Item href="#action/1.1">Who we are</NavDropdown.Item>
      <NavDropdown.Item href="#action/2.2">
        How we work
      </NavDropdown.Item>
      <NavDropdown.Item href="#action/2.2">
        Certifications
      </NavDropdown.Item>
    </NavDropdown>
  )
}

函数导航（）{
const[shouldOpen，show]=useState（false）；
返回(
显示（正确）}
onMouseLeave={（）=>show（false）}
show={this.shouldOpen}>
我们是谁
我们如何工作
所获证书
)
}

这是否回答了您的问题@Titlum我正在使用功能组件，如何在其上实现相同功能？@Titlum我有三个单独的NavDropdown，当我将鼠标悬停在任何菜单项上时，所有菜单项都会显示出来。这是因为它们都在监视同一个变量。您应该为此创建一个新问题，因为这不是问题的原始范围。@Titlum好的，明白了。我为所有三个不同的NavDropDown创建了一个单独的状态变量，它工作了。除了这个，还有其他的捷径和选择吗？@Titulum除了open={this.shouldOpen}之外，它还能工作，我用show={shouldOpen}