在父級中創建 setTimeout 並在子級中關閉它

Question

我有一個特殊的問題讓我整個星期都睡不着覺。

我有一個父組件，它有一個彈出式子組件。 當我打開頁面時，彈出窗口會顯示出來，5 秒后它會隨着setTimeout消失。

這個彈出窗口中有一個輸入元素。

我希望彈出窗口在 5 秒后消失，或者如果我單擊輸入中的數字。 我試圖為setTimeout創建一個timerRef並在孩子中關閉它，但它沒有用。

你能幫我嗎？ 提前致謝。

父組件.tsx

const ParentComponent = () => {
    const [isVisible, setIsVisible] = useState(true)
    timerRef = useRef<ReturnType<typeof setTimeout>>()

    timerRef.current = setTimeout(() => {
        setIsVisible(false)
    }, 5000)

    useEffect(() => {
        return () => clearTimeout()
    })

    return (
        <div>
            <ChildrenComponent isVisible={isVisible} inputRef={timerRef} />
        </div>
    )
}

子組件.tsx

const ChildrenComponent = ({ isVisible, inputRef}) => {
    return (
        <div className=`${isVisible ? 'display-block' : 'display-none'}`>
            <form>
                <input onClick={() => clearTimeout(inputRef.current as NodeJS.Timeout)} />
            </form>
        </div>
    )
}

Answer 1

每次組件重新呈現時，您都會設置一個新計時器，也就是 state 發生更改時超時本身。

timerRef.current = setTimeout(() => {
  setIsVisible(false);
}, 5000);

相反，您可以將初始化放在useEffect中。

useEffect(() => {
  if (timerRef.current) return;

  timerRef.current = setTimeout(() => {
    setIsVisible(false);
  }, 5000);
  return () => clearTimeout(timerRef.current);
}, []);

您還應該刪除在每個渲染器上運行的“松散”useEffect，這個

useEffect(() => {
  return () => clearTimeout();
});