React 如何在 2 秒内隐藏元素

Question

我使用 Tailwind-css 和 React，想在 2 秒后隐藏 div-元素。用户按下按钮，一个 snackbar 出现 2 秒，表明建议已发送。我使用 setTimeout 但它不是正确的变体。 Function Snackbar get props 是否 snackbar open (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>
  );
};

Answer 1

你应该把 setTimeout 放在 useEffect 里面，这样你就可以在组件重新渲染或卸载时清除超时。

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

React 如何在 2 秒内隐藏元素

How to hide element in 2 seconds in React

hide

reactjs

snackbar

tailwind-css