Javascript 将鼠标悬停在嵌套的React组件上会触发父组件onMouseOut和无限循环

我有一个React菜单项，它应该在悬停状态下显示子组件。当该子组件

信息图标

悬停时，工具提示应弹出打开。看起来是这样的：

以下是组件：

const TestFunc = (props) => {
const { icon, label, data } = props;
const [hovering, setState] = useState(false);

return (
    <div className="menu-item" onMouseOver={() => setState(true)} onMouseOut={() => setState(false)}>
        <div className="menu-item-element">
            <div className="sub-menu-item-element">{icon}</div>
            <div className="sub-menu-item-element">{label}</div>
        </div>
        {hovering ?
            <Tooltip
                id="base"
                align="top"
                content={data.tooltipContent}
                variant="learnMore"
                className="menu-item-element"
                position="overflowBoundaryElement"
            />
            : null
        }
    </div>
);

const TestFunc=（道具）=>{
const{icon，label，data}=props；
常量[悬停，设置状态]=使用状态（false）；
返回(
setState（true）}onMouseOut={（）=>setState（false）}>
{icon}
{label}
{悬停？
：null
}
);

但当我将鼠标悬停在info图标上时，这会触发

mouseOut

功能，然后图标消失，然后触发

mouseOver

功能，它会像这样循环，信息图标会反复闪烁

---

如何解决此问题？

在图标中，使用

onMouseLeave

来防止出现气泡。或

e.stopPropagation（）

在图标中使用

onMouseLeave

来防止气泡进入父级。或者

e.stopPropagation（）

可能重复的可能重复的可能重复的可能重复的可能重复的Wow工作，不是在图标上，我只是在父div上更改它，就像我有它一样。如果你能解释一下为什么这样做，我可以接受你的答案。哇，这样做有效，不是在图标上，我只是在父div上更改了它，就像我有它一样。如果你能解释一下为什么会这样，我可以接受你的答案。