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

这听起来可能很傻，但我正在努力理解我自己的代码，我想在这里看到您的输入。我使用useRef（）在用户更改屏幕时单击HTML元素。由于某些原因，ref.current传递我创建的if条件，因此它仅在该条件不为null时执行。不知道为什么？我设法使它工作，但我不得不添加一个额外的如果语句onresize函数，有人能解释为什么会这样

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;

import React，{useRef，useffect}来自“React”；
从“/background.css”导入类；
常量背景=（道具）=>{
const backDropRef=useRef（null）；
useffect（（）=>{
if（backDropRef.current！==null&&props.show）{
document.body.onresize=（）=>{
if（backDropRef.current！==null）{
backDropRef.current.click（）；
}
};
}
}，[backDropRef.current，props.show]）；
让classforbackground=classes.background；
如果（道具工具提示）{
classforbackground=classes.BackdropForToolTip；
}
回归道具秀(
)：null；
};
出口违约背景；

我将分成几个部分：

• 在if条件下为true时，它附加具有backDropRef.current.click（）的

  onresize

  侦听器

• backDropRef.current

  指向您的

  div

• 一旦

  show

  prop变为false，就会从DOM中删除

  div

• backDropRef.current

  lost

  div

  reference，现在是

  null

---

在所有这些之后，您需要if条件，因为否则当

show

为false时触发的任何

resize

事件都不存在

，

backDropRef.current

为

null

，您试图调用

单击
一个抛出错误的
null
值。
您是否在问为什么
current
为
null
曾经？不，不，为什么我需要onresize arrow函数中的if语句？我的印象是，如果第一个陈述不允许达到这一点。。。