在 chakra UI MENU 组件下，儿童 ID 越来越重复

Posted 2023-03-29

【中文标题】在 chakra UI MENU 组件下，儿童 ID 越来越重复

【英文标题】：childrens ID's are getting duplicate under chakra UI MENU component

【发布时间】：2021-12-31 07:12:03

【问题描述】：

MenuBUTTONS id 在脉轮菜单组件中出现重复。

我是脉轮新手。我正在尝试使用 chakra MENU 组件创建侧边栏。我使用了如下所示的 MenuButton。生成的代码具有重复的按钮 ID。同样，当用户单击一个按钮时，所有按钮都变为活动状态。

<Menu>
  <MenuButton>
    <Flex>
      menubtn
    </Flex>
  </MenuButton>
  <MenuButton>
    <Flex>
      menubtn
    </Flex>
  </MenuButton>
  <MenuButton>
    <Flex>
      menubtn
    </Flex>
  </MenuButton>
  <MenuButton>
    <Flex>
      menubtn
    </Flex>
  </MenuButton>
</Menu>

生成的 html。

<button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57">content</button>
<button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57">content</button>
<button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57">content</button>
<button id="menu-button-2" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-2" class="chakra-menu__menu-button css-er1y57">content</button>

提前致谢。

【参考方案1】：

尝试使用MenuItem 并传递一些唯一的 id 或索引作为键

         <MenuButton>
            <MenuItem onClick=() => foo() key=something.id>
               <Flex>
                  menubtn
               </Flex>
            </MenuItem>
         </MenuButton>