Javascript 如何在Reactjs中跟踪功能组件中的状态？

我通过为三个不同的NavDropDown创建一个单独的状态变量，在hover上显示了nav项的所有下拉列表，而不是单击，并且成功了。除此之外还有其他捷径和选择吗

目前我的代码如下：

函数导航（）{
const[isOpenAbout，setIsOpenAbout]=useState（false）；
常量[等密度服务，设置等密度服务]=使用状态（假）；
const[isOpenContact，setIsOpenContact]=useState（false）；
返回(
setIsOpenAbout（真）}
onMouseLeave={（）=>setIsOpenAbout（false）}
show={isOpenAbout}
>
我们是谁
我们如何工作
所获证书
setIsOpenServices（真）}
onMouseLeave={（）=>SetIsoSensServices（false）}
show={isopenseservices}
>
云数字转型
专家云建议和支持
软件开发
专责小组
云学院
SETISOPENCACT（真）}
onMouseLeave={（）=>setIsoContact（false）}
show={isOpenContact}
>
销售额
支持
)
}

---

跟踪国家的最佳方式是什么？如果有人能帮助我，那就更好了

您可以通过仅使用1个状态对象来改进代码，这更通用，将来更容易扩展：

函数导航（）{
const defaultState={
关于：假，
服务：假，
联系人：false
};
常量显示=函数（下拉元素）{
const newState=Object.assign（this.dropdownState）；
newState[dropdownElement]=true；
setDropdownState（新闻状态）；
};
常量隐藏=函数（下拉元素）{
const newState=Object.assign（this.dropdownState）；
newState[dropdownElement]=false；
setDropdownState（新闻状态）；
}
常量[dropdownState，setDropdownState]=使用状态（默认状态）；
返回(
显示（“关于”）}
onMouseLeave={（）=>hide（“about”）}
show={this.dropdownState.about}
>
我们是谁
我们如何工作
所获证书
显示（“服务”）}
onMouseLeave={（）=>hide（“服务”）}
show={this.dropdownState.services}
>
云数字转型
专家云建议和支持
软件开发
专责小组
云学院
显示（“联系人”）}
onMouseLeave={（）=>隐藏（“联系人”）}
show={this.dropdownState.contact}
>
销售额
支持
)
}

您只需使用一个状态对象即可改进代码，这更通用，将来更容易扩展：

函数导航（）{
const defaultState={
关于：假，
服务：假，
联系人：false
};
常量显示=函数（下拉元素）{
const newState=Object.assign（this.dropdownState）；
newState[dropdownElement]=true；
setDropdownState（新闻状态）；
};
常量隐藏=函数（下拉元素）{
const newState=Object.assign（this.dropdownState）；
newState[dropdownElement]=false；
setDropdownState（新闻状态）；
}
常量[dropdownState，setDropdownState]=使用状态（默认状态）；
返回(
显示（“关于”）}
onMouseLeave={（）=>hide（“about”）}
show={this.dropdownState.about}
>
我们是谁
我们如何工作
所获证书
显示（“服务”）}
onMouseLeave={（）=>hide（“服务”）}
show={this.dropdownState.services}
>
云数字转型
专家云建议和支持
软件开发
专责小组
云学院
显示（“联系人”）}
onMouseLeave={（）=>隐藏（“联系人”）}
show={this.dropdownState.contact}
>
销售额
支持
)
}

在

组件中，您可以设置一个名为

activeDropdown

的属性。在

onMouseEnter

上，您可以像现在一样设置

标题的状态，并在

onMouseLeave

上清除

activeDropdown

。最后，在

show

道具中，您可以将标题与

活动下拉列表进行比较：

function Navigation(){
  const [activeDropdown, setActiveDropdown] = useState("");

  const clearActiveDropdown () => setActiveDropdown("");
  ...
  <Nav className="ml-auto">
    <NavDropdown
      title="About"
      onMouseEnter={ () => setActiveDropdown("about") }
      onMouseLeave={ clearActiveDropdown }
      show={ activeDropdown === "about" }
    >
      ...
    </NavDropdown>
  </Nav>
  ...
}

函数导航（）{
常量[activeDropdown，setActiveDropdown]=useState（“”）；
const clearActiveDropdown（）=>setActiveDropdown（“”）；
...
setActiveDropdown（“关于”）}
onMouseLeave={clearActiveDropdown}
show={activeDropdown===“关于”}
>
...
...
}
在
组件中，您可以设置一个名为
activeDropdown
的属性。在
onMouseEnter
上，您可以像现在一样设置
标题的状态，并在
onMouseLeave
上清除
activeDropdown
。最后，在
show
道具中，您可以将标题与
活动下拉列表进行比较：

function Navigation(){
  const [activeDropdown, setActiveDropdown] = useState("");

  const clearActiveDropdown () => setActiveDropdown("");
  ...
  <Nav className="ml-auto">
    <NavDropdown
      title="About"
      onMouseEnter={ () => setActiveDropdown("about") }
      onMouseLeave={ clearActiveDropdown }
      show={ activeDropdown === "about" }
    >
      ...
    </NavDropdown>
  </Nav>
  ...
}

函数导航（）{
常量[activeDropdown，setActiveDropdown]=useState（“”）；
const clearActiveDropdown（）=>setActiveDropdown（“”）；
...
setActiveDropdown（“关于”）}
onMouseLeave={clearActiveDropdown}
show={activeDropdown===“关于”}
>
...
...
}
看起来不错，如果您只需要此文件中的状态，请使用钩子；如果您想以其他方式执行此操作，请使用css/jssLooks good；如果您只需要此文件中的状态，请使用钩子，如果你想用另一种方式来做，你可以使用css/jssEven。当我在导航项上进行这些更改时，下拉项没有出现。你有任何异常吗？我事先没有收到任何异常，但导航栏中的下拉列表即使在悬停时也不会显示