Javascript 使React功能组件中的警报消息在x时间后消失

我制作了一个expire组件，允许其中的内容在x秒后消失。它通过使用state和setTimeout工作

import React，{useffect，useState}来自“React”；
功能过期（道具）
{
const[isVisible，setIsVisible]=useState（true）；
useffect（（）=>
{
设置计时器（道具延迟）；
}, []);
常量设置计时器=（延迟）=>
{
setTimeout（（）=>setIsVisible（false），延迟）；
};
返回(
可见
？{props.children}
: 
);
}
出口违约到期；

我是这样使用它的：

但我遇到的问题是，在5秒钟后消失一次后，当再次更改

alertMsgState

时[例如，再次提交表单，因此我想再次显示警报]，消息不会像预期的那样在5秒钟后重新呈现并消失。检查时，我只看到

元素

---

请仅使用功能组件和挂钩进行回答。

您不会执行任何会再次触发显示警报组件的操作

一种解决方案是使用整数键，例如，当您想再次显示它时，请执行以下操作：

// inside parent
const [key, setKey] = useState(0);

// Say from a click handler when you again want to show your component, do:
let onClick=()=>{
  setKey(key+1);
}

//...

<Expire delay="5000" key={key}>
    <Alert type={alertMsgState} size="col-md-10" />
</Expire>

//在父级内部
const[key，setKey]=useState（0）；
//当您再次希望显示组件时，请从单击处理程序中执行以下操作：
让onClick=（）=>{
设置键（键+1）；
}
//...

---

当在不同的组件之间使用不同的键时，它将卸载旧组件并再次装载它-因此您将获得所需的行为。您可以做的一件事是将useEffect绑定到

props.children

，因此每当此更改时，您都会重置消息，恢复可见性并再次启动超时：

function Expire(props)
{
    const [isVisible, setIsVisible] = useState(true);
    const [children, setChildren] = useState(props.children)

    useEffect(() =>
    {
        setChildren(props.children)
        setIsVisible(true)
        setTimer(props.delay);
    }, [props.children]);


    const setTimer = (delay) =>
    {
        setTimeout(() => setIsVisible(false), delay);
    };

    return (
        isVisible
            ? <div>{children}</div>
            : <span />
    );
}

功能过期（道具）
{
const[isVisible，setIsVisible]=useState（true）；
const[children，setChildren]=useState（props.children）
useffect（（）=>
{
setChildren（道具、儿童）
setIsVisible（真）
设置计时器（道具延迟）；
}，[props.children]）；
常量设置计时器=（延迟）=>
{
setTimeout（（）=>setIsVisible（false），延迟）；
};
返回(
可见
？{儿童}
: 
);
}

谢谢！你的解决方案有效。但是，请问您是否可以提供其他选择？我想保留expire component中expire component的所有代码，不让我的父组件被密钥和其他东西弄脏。@Haris首先问自己：您希望何时重新绘制expire component？每当更改子组件时，至少在这种情况下是这样。@Haris您能在问题中举例说明您希望如何使用expire component吗？如果您想再次显示Expire组件，您需要给它一个不同的子组件，那么它是否易于使用？我已经在问题中显示了，我现在将它与警报组件一起使用。当用户提交表单时，会更新警报组件

alertMsgState

是从服务器收到的来自表单submisson的消息。我在扩展我的解决方案时做了一个尝试，它似乎可以工作。不知道您的警报组件是什么样子的，但如果它是标准组件，就不会有问题。