反应自定义钩子 - 多个回调引用

Question

我有一个名为 useClickawayListener 的钩子。它想监听 ignored HTML 元素数组之外的点击。如果忽略元素的数量可以随着渲染而改变，那将会很方便。

我可以将被忽略的元素作为参考提供，例如：

useClickAwayListener([ref1, ref2], () => { /* clicked away */ })

但是有一个问题 - 如果任何 refs 更改，钩子将不会重新执行，这将导致它具有过时的事件侦听器等。

要监听 ref 的变化，我们可以使用 ref 的回调形式。然而，还有另一个问题。

如果我们只想忽略一个元素，钩子可以是这样的：

const useClickAwayListener = (listener) => {
  const ignoredRefCb = useCallback(ref => {
    // attach event listeners
  }, [listener]);

  return ignorefRefCb;
}

用法：

const ref = useClickAwayListener(e => {});

...

<div ref={ref} />

一旦我想要多个带有回调的被忽略元素，问题就会出现 - 我会以某种方式返回多个引用回调，管理清理等等，所有这些都带有可变数量的引用。

有什么办法可以解决这个问题？