我正在努力解决这个问题。我的自定义钩子应该使用所需的输入创建一个简单的弹出窗口,并在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>
}
</>
)
}
答案 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
挂钩中的空数组使它知道仅在安装时触发(如果返回值则卸载)。您也不需要其他未更新的状态变量。这些可以作为函数参数传递。