在props值发生更改时添加和删除事件侦听器

Question

每次props.isUserSelected布尔值更改时，我都有一个UserComponent，我想添加或删除事件侦听器。我正在使用useEffect来监视props.isUserSelected值的更改。这是我想要的工作方式。

import React, { useState, useEffect } from "react";
const UserComponent = (props) => {
const [wrapperEle] = useState(React.createRef());
useEffect(() => {
if (props.isUserSelected === true) {
// add event listeners
} else {
// remove event listeners
}
}, [props.isUserSelected]);
return (
<div ref={wrapperEle}>
<div
id="1"
ref={canvasEle}
className={`test`}
width={props.canvasWidth}
height={props.canvasHeight}
></div>
</div>
);
};
export default UserComponent;

我需要引用useEffect中的其他元素，例如wrapperEle。我必须添加wrapperEle作为依赖项。但这导致每次包装器也发生变化时都会执行useEffect，但我只是在prop.isUserSelected发生变化时运行它。

有没有办法实现这一点，只在props.isUserSelected时执行？

非常感谢

useEffect(() => {
if (props.isUserSelected === true) {
// add event listeners
const test = wrapperEle.current;
} else {
// remove event listeners
}
}, [props.isUserSelected, wrapperEle]);

Answer 1

这不是处理函数组件中引用的方式(研究useRef与createRef(。

可能的解决方案应该是这样的：

const UserComponent = ({ isUserSelected }) => {
const wrapperRef = useRef();
useEffect(() => {
if (isUserSelected) {
wrapperRef.current.addEventListener(...);
} else {
wrapperRef.current.removeEventListener(...);
}
// Cleanup function
return () => {
wrapperRef.current.removeEventListener(...);
};
}, [isUserSelected]);
return <div ref={wrapperEle}></div>;
};

有关更多示例，请参阅useRef文档。