Alert自动消失功能

Question

我的目的是让用户在不单击任何按钮的情况下看到我的页面开始的警报。过了一会儿，它应该会自动消失，我正在reactjs上尝试这个，所以任何人都可以帮助我找到我应该应用哪个逻辑

Answer 1

首先呈现警报组件。定义一个初始值为false的布尔状态变量

然后用setTimeout更新状态变量

import React, { useState, useEffect } from "react";
export const Alert = () => {
const [timeIsUp, setTimeIsUp] = useState(false);
useEffect(() => {
setTimeout(() => {
setTimeIsUp(true);
}, 5000);
}, []);
if (timeIsUp) {
return null;
}
return <div>your actual alert component content</div>;
};

Answer 2

你可以参考这个链接:custom-modal-popup-component

也只是首先使modal的状态为真，并在useEffect中添加setTimeout，并在期望的时间后使其为假。

Answer 3

您是否使用class components或functional components来渲染您的React页面?

你要找的是life cycles，我强烈建议你看看ReactJS生命周期文档。

在页面加载时执行或做某事的生命周期方法有两种用法:

如果你使用的是class components，你可以在你的组件内部调用一个叫做ComponentDidMount()的本地方法，他的用法可以在这里的文档中找到。

现在，如果你正在使用functional components，你需要看看useEffect在React Hooks。

之后，您可以从javascript查看setTimeout原生方法。

希望这也有帮助!