Блог

Идентификатор кнопок меню дублируется в компоненте меню чакры.

я новичок в чакре. я пытаюсь создать боковую панель, используя компонент МЕНЮ чакры. я использовал меню, как показано ниже. сгенерированный код имеет дубликаты идентификаторов кнопок. также, когда пользователь нажимает на одну кнопку, все кнопки становятся активными.

 lt;Menugt;  lt;MenuButtongt;  lt;Flexgt;  menubtn  lt;/Flexgt;  lt;/MenuButtongt;  lt;MenuButtongt;  lt;Flexgt;  menubtn  lt;/Flexgt;  lt;/MenuButtongt;  lt;MenuButtongt;  lt;Flexgt;  menubtn  lt;/Flexgt;  lt;/MenuButtongt;  lt;MenuButtongt;  lt;Flexgt;  menubtn  lt;/Flexgt;  lt;/MenuButtongt; lt;/Menugt;  

Сгенерированный HTML.

 lt;button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57"gt;contentlt;/buttongt; lt;button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57"gt;contentlt;/buttongt; lt;button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57"gt;contentlt;/buttongt; lt;button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57"gt;contentlt;/buttongt;  

Заранее спасибо.

Попробуйте использовать MenuItem и передать какой-либо уникальный идентификатор или индекс в качестве ключа

 lt;MenuButtongt;  lt;MenuItem onClick={() =gt; foo()} key={something.id}gt;  lt;Flexgt;  menubtn  lt;/Flexgt;  lt;/MenuItemgt;  lt;/MenuButtongt;