如何使用 popperjs 在 React 中为多个项目使用一个弹出框？

问题描述

我想使用 PopperJS 为我的所有导航项使用一个弹出框。当用户将鼠标悬停在导航项上时，弹出框应显示在带有相应文本的位置。目前我的导航如下所示：

const navigation = [
   { name: "Item 1",href="item1" },{ name: "Item 2",href="item2"},{ name: "Item 3",href="item3" }
];

const [refElements,setRefElements] = useState([]);
const [isShowing,setIsShowing] = useState(false);

return (
   {navigation.map((item,index) => (
     <a
      key={item.name}
      href={item.href}
      ref={setRefElements}
      onMouseEnter={() => setIsShowing(true)}
      onMouseLeave={() => setIsShowing(false)}
     />
     <Popover
      refElement={refElements[index]}
      position="right"
      isShowing={isShowing}
     >
       <p>{item.name}</p>    
     </Popover/>
   )}
)

我需要更改什么才能使其正常工作？我该如何改进？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）