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

Question

我使用 Tailwind-css 和 React，并希望在 2 秒后隐藏 div 元素。用户按下按钮，小吃栏会出现 2 秒，表明建议已发送。我使用setTimeout但它不是正确的变体。函数 Snackbar 获取小吃栏是否打开（Snackbar = true）、小吃栏上的消息（suggestResponse.message）以及如果Snackbar 关闭（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>
  );
};

Answer 1

您应该放入setTimeoutuseEffect 内部，以便在组件重新渲染或卸载时清除超时。

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