Question

我正在努力解决这个问题。我的自定义钩子应该使用所需的输入创建一个简单的弹出窗口，并在3秒钟后删除。当然，当前，它会在每次重置计数器时重新渲染。如何使它仅渲染一次，然后从dom中删除？

export function createPopup(content, popupType) {
  const [message, setMessage] = useState(content)
  const [type, setType] = useState(popupType)
  const [value, setCounter] = useState(3)

  const myTimer = setTimeout(() => {
    return setCounter(value - 1)
  }, 1000)

  useLayoutEffect(() => {
    const id = setTimeout(() => {
      setCounter(value + -1);
    }, 1000);

    return () => {
      clearTimeout(id);
    };
  }, [value])

  return (
    <>
      {value !== 0 &&
        <PopupMolecule type={type}>
          {message}
        </PopupMolecule>
      }
    </>
  )
}

Answer 1

我认为您想要更多类似这样的东西：

export function createPopup(content, popupType) {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => setVisible(false), 3000);
  }, []);

  return (
    <>
      {visible &&
        <PopupMolecule type={popupType}>
          {content}
        </PopupMolecule>
      }
    </>
  )
}

这里仍然需要进行一些改进（例如，在退出或过渡时淡出，并且此设置方式不能多次使用），但这应该可以解决您所说的问题。 / p>

这将在弹出窗口中显示您的弹出窗口三秒钟，然后使弹出窗口不可见并将其从DOM中卸载。 useEffect挂钩中的空数组使它知道仅在安装时触发（如果返回值则卸载）。您也不需要其他未更新的状态变量。这些可以作为函数参数传递。

React Hooks-使用后移除组件

1 个答案: