Javascript 如何修复无法读取属性'；客户端宽度'；空值？

调整窗口大小时出现错误“无法读取null的属性'clientWidth'。我想，这是因为，我得到了ref null。你知道我该怎么修吗

import React, { useRef, useState, useEffect } from "react";

const data = [
  "Some short text",
  "Some text that is a little bit longer",
  "Some text that will need to wrap but still fits on two lines",
  "A massive range of hammer drill machines and rotary hammers for SDS-plus accessory tools."
];
const TooltipDiv = props => {
  const divRef = useRef(null);
  const [allowTooltip, setAllowTooltip] = useState(false);
  useEffect(() => {
    if (!tooltip && divRef.current.scrollWidth > divRef.current.clientWidth) {
      setTooltip(true);
    } else if (window.addEventListener) {
      window.addEventListener('resize', () => {
        if (!tooltip && divRef.current.scrollWidth > divRef.current.clientWidth) {
            setTooltip(true);
        }
      })
    }
  }, [tooltip, divRef]);
  if (allowTooltip) {
    return (
      <Tooltip title={props.text}>
        <div ref={divRef} className={props.className}>
          {props.text}
        </div>
      </Tooltip>
    );
  }
  return (
    <div ref={divRef} className={props.className}>
      {props.text}
    </div>
  );
};
function App(props) {
  return (
    <>
      {data.map(text => {
        return (
          <>
            <TooltipDiv text={text} className={props.classes.listItem} />
          </>
        );
      })}
    </>
  );
}

import React，{useRef，useState，useffect}来自“React”；
常数数据=[
“一些短文本”，
“有些文字稍微长一点”，
“一些需要换行但仍适合两行的文本”，
“SDS plus附属工具的大量锤式钻床和旋转锤。”
];
常量工具提示div=props=>{
const divRef=useRef（null）；
常量[allowTooltip，setAllowTooltip]=useState（false）；
useffect（（）=>{
如果（！tooltip&&divRef.current.scrollWidth>divRef.current.clientWidth）{
设置工具提示（true）；
}else if（window.addEventListener）{
window.addEventListener（'resize'，（）=>{
如果（！tooltip&&divRef.current.scrollWidth>divRef.current.clientWidth）{
设置工具提示（true）；
}
})
}
}，[tooltip，divRef]）；
如果（allowTooltip）{
返回(
{props.text}
);
}
返回(
{props.text}
);
};
功能应用程序（道具）{
返回(
{data.map（text=>{
返回(
);
})}
);
}

---

调整窗口大小时出现错误“无法读取null的属性'clientWidth'。我想，这是因为，我得到了ref null。知道如何修复它吗？

窗口。addEventListener正在尝试读取一个尚不存在的值。此时，divRef为null

import React, { useRef, useState, useEffect } from "react";

const data = [
  "Some short text",
  "Some text that is a little bit longer",
  "Some text that will need to wrap but still fits on two lines",
  "A massive range of hammer drill machines and rotary hammers for SDS-plus accessory tools."
];
const TooltipDiv = props => {
  const divRef = useRef(null);
  const [allowTooltip, setAllowTooltip] = useState(false);
  useEffect(() => {
    if (!tooltip && divRef.current.scrollWidth > divRef.current.clientWidth) {
      setTooltip(true);
    } else if (window.addEventListener) {
      window.addEventListener('resize', () => {
        if (!tooltip && divRef.current.scrollWidth > divRef.current.clientWidth) {
            setTooltip(true);
        }
      })
    }
  }, [tooltip, divRef]);
  if (allowTooltip) {
    return (
      <Tooltip title={props.text}>
        <div ref={divRef} className={props.className}>
          {props.text}
        </div>
      </Tooltip>
    );
  }
  return (
    <div ref={divRef} className={props.className}>
      {props.text}
    </div>
  );
};
function App(props) {
  return (
    <>
      {data.map(text => {
        return (
          <>
            <TooltipDiv text={text} className={props.classes.listItem} />
          </>
        );
      })}
    </>
  );
}

我认为您应该尝试测试div.current是否存在，然后执行

if

语句：

if（工具提示&&divRef.current&&divRef.current.scrollWidth&&divRef.current.clientWidth）{
//你的陈述
}

另外，请尝试在不使用

[divRef，tooltip]

的情况下执行该操作，因为我想您希望它只执行一次（

[]

）