如何在 React 中 2 秒内隐藏元素

Posted 2023-02-23

【中文标题】如何在 React 中 2 秒内隐藏元素

【英文标题】：How to hide element in 2 seconds in React

【发布时间】：2021-10-30 04:30:58

【问题描述】：

我使用 Tailwind-css 和 React 并希望在 2 秒后隐藏 div 元素。 用户按下按钮，一个快餐栏会出现 2 秒，以表明建议已发送。 我使用 setTimeout 但它不是正确的变体。 Function Snackbar 获取 props 是否 snackbar 打开 (snackbar = true), snackbar 上的消息 (suggestResponse.message)如果 snackbarClose (false)

则应发送

const SnackbarResult = (
  snackbar,
  snackbarClose,
  suggestResponse,
: ISnackbarProps) => 
  if (snackbar) 
    setTimeout(() => snackbarClose, 2000);
  
  if (!snackbar) return null;
  return (
    <div className="bg-green-500 fixed right-2 bottom-1 font-medium p-2 md:p-5">
      suggestResponse.message
    </div>
  );
;

【参考方案1】：

您应该将setTimeout 放在useEffect 中，以便在组件重新渲染或卸载时清除超时。

useEffect(() => 
  if (snackbar) 
    const timeout = setTimeout(() => snackbarClose(), 2000);
    return () => 
      clearTimeout(timeout);
    ;
  
, [snackbar]);

【讨论】：

谢谢。我怎么能忘记 useEffect！