gpt4 book ai didi

reactjs - 如何在 useEffect 中向 useRef 添加事件监听器

转载 作者:行者123 更新时间:2023-12-04 11:47:28 24 4
gpt4 key购买 nike

我正在构建一个自定义钩子(Hook),我想在其中向引用添加一个事件监听器,但我不确定如何正确清理,因为 listReflistRef.current可能为空:

export const myHook: MyHook = () => {
const listRef = useRef<HTMLDivElement>(null)

useEffect(() => {
// I can check for the presence of `listRef.current` here ...
if (listRef && listRef.current) {
listRef.current.addEventListener(...)
}

// ... but what's the right way for the return function?
return listRef.current.removeEventListener(...)
})

return [listRef]
}

最佳答案

编辑:

but I have to check for the presence of listRef in the return function too, right?



是的,您可以做的是将所有内容都包裹在 if 语句中
  useEffect(() => {
// Everything around if statement
if (listRef && listRef.current) {
listRef.current.addEventListener(...)

return () => {
listRef.current.removeEventListener(...)
}
}
})

如果你不打电话 addEventListener ,您无需拨打 removeEventListener ,这就是为什么您将所有内容都放入 if 中的原因.

您需要在 return 中传递一个函数,该函数执行您想要在清理中执行的操作。
export const myHook: MyHook = () => {
const listRef = useRef<HTMLDivElement>(null)

useEffect(() => {
// This is ok
if (listRef && listRef.current) {
listRef.current.addEventListener(...)
}

// Passing a function that calls your function
return () => {
listRef.current.removeEventListener(...)
}
})

return [listRef]
}

您需要注意的另一件事是在 fooEventListener 内部, ...应该是函数的相同引用,这意味着:

你不应该这样做:
  useEffect(() => {
if (listRef && listRef.current) {
listRef.current.addEventListener(() => console.log('do something'))
}

return () => {
listRef.current.removeEventListener(() => console.log('do something'))
}
})

你应该这样做:
  useEffect(() => {
const myFunction = () => console.log('do something')

if (listRef && listRef.current) {
// Passing the same reference
listRef.current.addEventListener(myFunction)
}

return () => {
// Passing the same reference
listRef.current.removeEventListener(myFunction)
}
})

关于reactjs - 如何在 useEffect 中向 useRef 添加事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60513173/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com