将鼠标悬停在嵌套的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()