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

Question

我有一个 React 菜单项，它应该在悬停时显示一个子组件。当该子组件 info-icon 悬停时，应该会弹出一个工具提示。看起来像这样:

这是组件:

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>
);

但是当我将鼠标悬停在信息图标上时，这会触发 mouseOut 函数，然后图标消失，然后触发 mouseOver 函数，它就像与信息图标一遍又一遍地闪烁。

如何解决这个问题？

Answer 1

在图标中使用 onMouseLeave 来防止冒泡到父级。或者e.stopPropagation()