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

【问题标题】：childrens ID's are getting duplicate under chakra UI MENU component在 chakra UI MENU 组件下，儿童 ID 越来越重复
【发布时间】：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>

提前致谢。

【问题讨论】：

标签： javascript html reactjs duplicates chakra-ui

【解决方案1】：

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

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

【讨论】：