如何制作 React 弹出通知类型的代码

Question

position 采用 transform: translateY().

的值

问题是我无法 return 将 position 值恢复为 -100%。如何在 3 秒后返回 return 值？

这是我的第一个问题，如果问的不对，请见谅。

let position = "-100%";

  if (message !== "") {
    position = "0";
    setTimeout(() => {
      position = "-100%";
      clearMessage();
    }, 3000);
  }

  return <StyledNotification show={position}>{message}</StyledNotification>;

Answer 1

使用状态设置位置值

const [position, setPosition] = useState('')

  if (message !== "") {
    setPosition("0%");
    setTimeout(() => {
       setPosition("-100%");
      clearMessage();
    }, 3000);
  }

检查此沙箱 link： https://codesandbox.io/s/agitated-proskuriakova-pnqcg?fontsize=14&hidenavigation=1&theme=dark

Answer 2

所以，我尝试通过状态来实现它，但它返回了一个错误：重新渲染太多。 React 限制渲染次数以防止无限循环。 然后我决定添加生命周期方法来跟踪它需要对代码进行哪些更改运行以避免循环。在我的例子中，change 是 message。尽管如此，还是感谢大家的反馈！

    const [position, setPosition] = useState("-100%");
    useEffect(() => {
      if (message !== "") {
        setPosition("0");
        setTimeout(() => {
          setPosition("-100%");
        }, 3000);
      }
    }, [message]);

如何制作 React 弹出通知类型的代码

How can I make React popup notification kind of code

notifications

reactjs