React Hooks：用于模式事件监听器的 useEffect

我有一个模式对话框，如果用户在模式之外单击，我想关闭该对话框。我编写了以下 useEffect 代码，但遇到了以下问题：

模式对话框包含许多子项（React Nodes），这些子项可能会发生变化（例如，用户删除列表中的条目）。这些交互触发我的 onClick 方法，但由于单击的列表项已从模式中删除，因此即使单击位于模式内，模式也会关闭。

我认为在 useEffect 的第二个参数处添加 [ Children ] 会足够快地清理旧的效果事件侦听器，以便该方法不会再次运行，但事实并非如此。

我在类组件中处理了同样的问题ignoreNextClick-声明但必须有一个更清洁的解决方案，对吗？

    useEffect( () => {
        const onClick = ( event ) => {
            const menu = document.getElementById( 'singleton-modal' );
            if ( !menu ) return;

            // do not close menu if user clicked inside
            const targetInMenu = menu.contains( event.target );
            const targetIsMenu = menu === event.target;
            if ( targetInMenu || targetIsMenu ) return;

            onCloseModal();
        };

        window.addEventListener( 'click', onClick, false );

        return () => window.removeEventListener( 'click', onClick, false );
    }, [ children ] );

我找到了一个不需要任何存储旧道具的解决方案。

useEffect 调用如下所示：

useEffect( () => {
        const onClickOutside = () => onCloseModal();
        window.addEventListener( 'click', onClickOutside, false );
        return () => window.removeEventListener( 'click', onClickOutside );
    }, [] );

如果用户在模态中单击，则直接将以下单击侦听器添加到模态将阻止调用窗口单击侦听器。

<div
    className={`modal ${ classes }`}
    onClick={event => event.stopPropagation()}
    role="presentation"
>
   {children}
</div>`

我还添加了角色演示，以使模式更易于访问且符合咏叹调。