在 React 功能組件中使警報消息在 x 時間后消失

Question

我制作了一個過期組件，它允許其中的內容在 x 秒后消失。 它通過使用 state 和 setTimeout 工作。

import React, { useEffect, useState } from 'react';

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

    useEffect(() =>
    {
        setTimer(props.delay);
    }, []);


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

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

export default Expire;

我這樣使用它：

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

但我遇到的問題是，在 5 秒后消失一次后，當alertMsgState再次更改時 [例如。 再次提交表單，所以我想再次顯示警報]，消息不會重新呈現並在 5 秒后消失，就像它應該的那樣。 在檢查時，我只看到<span />元素。

請僅使用功能組件和掛鈎回答。

Answer 1

您不會做任何會重新觸發再次顯示警報組件的操作。

例如，一種解決方案是使用 integer 密鑰，當您想再次顯示它時，請執行以下操作：

// 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>

當不同渲染之間的 react 遇到具有不同鍵的組件時，它將卸載舊組件並再次安裝它 - 因此您將獲得所需的行為。

Answer 2

您可以做的一件事是將 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 />
    );
}