[英]Tooltip delay on hover with RXJS
我正在尝试使用 rxjs(不带 setTimeout())添加工具提示延迟(300 毫秒强调文本)。 我的目标是在 TooltipPopover 组件中包含此逻辑,稍后将重用该逻辑并将延迟作为道具传递(如果需要)。
我不确定如何使用 rxjs 在 TooltipPopover 组件中添加“延迟”逻辑?
门户网站.js
const Portal = ({ children }) => {
const mount = document.getElementById("portal-root");
const el = document.createElement("div");
useEffect(() => {
mount.appendChild(el);
return () => mount.removeChild(el);
}, [el, mount]);
return createPortal(children, el);
};
export default Portal;
TooltipPopover.js
import React from "react";
const TooltipPopover = ({ delay??? }) => {
return (
<div className="ant-popover-title">Title</div>
<div className="ant-popover-inner-content">{children}</div>
);
};
应用程序.js
const App = () => {
return (
<Portal>
<TooltipPopover>
<div>
Content...
</div>
</TooltipPopover>
</Portal>
);
};
然后,我在不同的地方渲染 TooltipPopover:
ReactDOM.render(<TooltipPopover delay={1000}>
<SomeChildComponent/>
</TooltipPopover>, rootEl)
这是我的方法:
mouseenter$.pipe(
// by default, the tooltip is not shown
startWith(CLOSE_TOOLTIP),
switchMap(
() => concat(timer(300), NEVER).pipe(
mapTo(SHOW_TOOLTIP),
takeUntil(mouseleave$),
endWith(CLOSE_TOOLTIP),
),
),
distinctUntilChanged(),
)
我对使用 RxJS 的 React 中的最佳实践不是很熟悉,但这将是我的推理。 所以,流程是这样的:
mouseenter$
,启动计时器。 concat(timer(300), NEVER)
是因为虽然应该在 300 毫秒后显示工具提示,但我们只想在mouseleave$
发出时隐藏它。mouseleave$
mouseleave$
在 300 毫秒之前发出,则CLOSE_TOOLTIP
将发出,但是您可以在distinctUntilChanged
的帮助下避免(我认为)不必要的重新渲染
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.