RXJS悬停时的工具提示延迟

编程问答 2022-08-13

问题描述

我正在尝试使用rxjs（不使用setTimeout（））添加工具提示延迟（300ms 强调的文字）。我的目标是将此逻辑包含在TooltipPopover组件内，稍后将重用该组件，并将延迟（如果需要）作为道具。

我不确定如何使用rxjs在TooltipPopover组件内添加“延迟”逻辑？

Portal.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>
  );
};

App.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(),)

我对React with RxJS的最佳实践不是很熟悉，但这是我的理由。因此，流程如下：

  • 在mouseenter$上，启动计时器。之所以使用concat(timer(300),NEVER)是因为尽管应该在300毫秒后显示工具提示，但我们只想在mouseleave$发出时隐藏它。
  • 在300毫秒后，将显示工具提示，并且将关闭mouseleave$
  • 如果mouseleave$在300ms之前发出，则CLOSE_TOOLTIP会发出，但是您可以在distinctUntilChanged的帮助下避免（我认为）不必要的重新渲染
delayreact-portalreactjsreactjsrxjs