React Tooltip使用setTimeout后无法自动关闭问题求助

你的问题在于使用了defaultIsOpen属性控制Tooltip显示状态，而这个属性是非受控属性——仅在组件挂载时设置初始状态，后续属性变化不会触发Tooltip的状态更新。要实现动态控制Tooltip的显示/隐藏，需使用受控属性isOpen。

具体修改步骤： #

• 更新自定义Tooltip的Props类型，将defaultIsOpen替换为isOpen
• 修改CustomTooltip组件，传递isOpen属性给底层Tooltip组件
• 在App组件中用isOpen替代defaultIsOpen，将状态show通过该属性传递

修正后的完整代码： #

import { useEffect, useState } from "react";
import { Tooltip } from "react-tooltip";

type CustomTooltipProps = {
  id: string;
  children: React.ReactNode;
  isOpen?: boolean; // 替换defaultIsOpen为isOpen
};

function App() {
  const [show, setIsShow] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsShow(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      <h1 data-tooltip-id="cstm-tooltip">Tooltip现在会在3秒后关闭</h1>
      <CustomTooltip id="cstm-tooltip" isOpen={show}> {/* 使用isOpen替代defaultIsOpen */}
        My Custom Tooltip
      </CustomTooltip>
    </>
  );
}

export default App;

const CustomTooltip: React.FC<CustomTooltipProps> = ({ id, children, isOpen }) => {
  return (
    <Tooltip id={id} isOpen={isOpen}> {/* 传递isOpen属性 */}
      {children}
    </Tooltip>
  );
};

为什么这样修改有效？ #

isOpen是react-tooltip提供的受控属性，会响应父组件的状态变化，实时更新Tooltip的显示状态。当show状态在3秒后变为false时，isOpen属性随之更新，Tooltip会立即关闭。

内容的提问来源于stack exchange，提问作者Aman Sadhwani