React Hooks-使用后移除组件

时间:2019-03-04 00:27:38

标签: reactjs react-hooks

我正在努力解决这个问题。我的自定义钩子应该使用所需的输入创建一个简单的弹出窗口,并在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>
      }
    </>
  )
}

1 个答案:

答案 0 :(得分: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挂钩中的空数组使它知道仅在安装时触发(如果返回值则卸载)。您也不需要其他未更新的状态变量。这些可以作为函数参数传递。