在我的代码中使用react钩子的奇怪行为

Question

这可能听起来很傻，但我正在努力理解我自己的代码，我想在这里看到您的输入。我使用useRef()在用户更改屏幕时单击HTML元素。由于某种原因，ref.current传递了我创建的if条件，所以它只在this不为空时执行。不知道为什么?我设法使它工作，但我不得不在onresize函数中添加一个额外的if语句，有人能解释一下为什么会这样吗?

import React, { useRef, useEffect } from 'react';
import classes from './Backdrop.css';
const backdrop = (props) => {
const backDropRef = useRef(null);
useEffect(() => {
if (backDropRef.current !== null && props.show) {
document.body.onresize = () => {
if (backDropRef.current !== null) {
backDropRef.current.click();
}
};
}
}, [backDropRef.current, props.show]);
let classForBackdrop = classes.Backdrop;
if (props.toolTipShow) {
classForBackdrop = classes.BackdropForToolTip;
}
return props.show ? (
<div
ref={backDropRef}
className={classForBackdrop}
onClick={props.clicked}
id="back-drop"
></div>
) : null;
};
export default backdrop;

Answer 1

我将分成几部分:

• 如果有条件，则附加具有backDropRef.current.click()的onresize监听器;
• backDropRef.current指向你的div;
• 一旦showprop变为false,div将从DOM中移除;
• backDropRef.current丢失了div参考，现在是null;

在所有这些之后，您需要if条件，因为否则当show为false时触发的任何resize事件都没有<div>,backDropRef.current是null，并且您尝试在null值上调用click，这会抛出错误。