Использование меню с несколькими реагирующими метисами, допускающего только один активный элемент - PullRequest
Новая
       6

Использование меню с несколькими реагирующими метисами, допускающего только один активный элемент

0 голосов
/ 28 февраля 2020

Я использую меню 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, чтобы я мог использовать разные заголовки (Dashboard / Analytics) до того, как отдельные интерактивные пункты меню.

Функциональность прекрасно работает, но я застрял в другой ситуации, когда у меня теперь есть 2 возможных активных элемента, выделенных одновременно.

Я ссылался на API на https://www.npmjs.com/package/react-metismenu#active -link-селекторы , в котором предлагалось использовать 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?

...