react - Next 15 弹窗按钮方法是不是这样写？

Question

'use client';

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

export default function ButtonClick() {
    const [show, setShow] = useState(false);
    useEffect(() => {
        function handleWindowClick() {
            console.log(show)
            setShow(false);
        }

        if (show) {
            window.addEventListener('click', handleWindowClick);
        } else {
            window.removeEventListener('click', handleWindowClick);
        }

        return () => {
            // 组件卸载时自动移除监听
            window.removeEventListener('click', handleWindowClick);
        };
    }, [show]);

    return (
        <div>
            <button onClick={(event) => {
                event.stopPropagation();
                setShow(!show);
            }} type="button">点击</button>
            {show && <div>显示</div>}
        </div>
    )
}

多个组件都有这个东西，但是DIV不一样，能不能合并一个方法什么的
现在是下面这个都要写一次

    const [show, setShow] = useState(false);
    useEffect(() => {
        function handleWindowClick() {
            console.log(show)
            setShow(false);
        }

        if (show) {
            window.addEventListener('click', handleWindowClick);
        } else {
            window.removeEventListener('click', handleWindowClick);
        }

        return () => {
            // 组件卸载时自动移除监听
            window.removeEventListener('click', handleWindowClick);
        };
    }, [show]);

Answer 1

可以写一个hook，这个是按照你的想法来做的话，当然最好的还是写一个Modal或者dialog组件