使用 RXJS 懸停時的工具提示延遲

Question

我正在嘗試使用 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)

Answer 1

這是我的方法：

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$發出時隱藏它。
• 300 毫秒后，顯示工具提示並將關閉mouseleave$
• 如果mouseleave$在 300 毫秒之前發出，則CLOSE_TOOLTIP將發出，但是您可以在distinctUntilChanged的幫助下避免（我認為）不必要的重新渲染