1

我在一个项目中使用 React Metis 菜单。其中一项要求是以以下方式格式化菜单：

*Dashboard*
 - Item A 
    - Sub Item A
    - Sub Item B

 - Item B
    - Sub Item C


*Analytics* 
 - Item C 
    - Sub Item D
    - Sub Item E

从结构来看，我认为我可以使用 2 个 Metis 菜单，以便在单个可点击菜单项之前可以使用不同的标题（仪表板/分析）。

该功能效果很好，但我遇到了另一种情况，我现在有 2 个可能的活动项目同时突出显示。

我参考了https://www.npmjs.com/package/react-metismenu#active-link-selectors上的 API ，这表明我们可以使用activeLinkLabel,activeLinkTo来覆盖/控制活动选择器。但是，它似乎仅在首次加载时才有效，但随后的单击将使更改过时。

...
const [ selected, setSelected ] = useState('');
const handleOnSelected = (event) => {
   const item = event.currentTarget;
   ...
   ...
   setSelected(item.name);

}
...


return (
<Fragment>
   <h5>Dashboard</h5>
   <MetisMenu activeLinkTo={selected} onSelected={handleOnSelected} content={DashboardItems} className="vertical-nav-menu" />

   <h5>Analytics</h5>
   <MetisMenu activeLinkTo={selected} onSelected={handleOnSelected} content={AnalyticsItems} className="vertical-nav-menu" />
</Fragment>);

有没有人使用过这个库或者可以指出我可能从 API 中错误地解释了什么？

4

1 回答 1

-1 
 <Fragment>
    <h5 className="app-sidebar__heading">Menu1</h5>
    <MetisMenu
      content={MainNav1}
      onSelected={toggleMobileSidebar}
      activeLinkFromLocation
      className="vertical-nav-menu"
      iconNamePrefix=""
      classNameStateIcon="pe-7s-angle-down"
    />

    <h5 className="app-sidebar__heading">Menu2</h5>
    <MetisMenu
      content={MainNav2}
      onSelected={toggleMobileSidebar}
      activeLinkFromLocation
      className="vertical-nav-menu"
      iconNamePrefix=""
      classNameStateIcon="pe-7s-angle-down"
    />
  </Fragment>
于 2020-10-02T13:54:02.480 回答