如何在渲染前确认useRef变量已获取DOM？解决clientHeight报错

问题根源是组件首次渲染时，inputRef.current还未绑定到目标DOM元素，此时调用checkOverflowing()直接访问el.clientHeight，自然会触发undefined属性读取错误。

直接给你两个关键修改点，配合完整代码：

解决步骤 #

• 在checkOverflowing函数里先做DOM元素存在性检查，避免访问undefined的属性
• 用useEffect在DOM渲染完成后再计算溢出状态，避开渲染阶段执行依赖DOM的逻辑

修改后的完整代码 #

import { useRef, useState, useEffect } from 'react';

// 你的其他组件逻辑...

const inputRef = useRef<HTMLDivElement>(null);
const [isOverflowing, setIsOverflowing] = useState(false);

const checkOverflowing = () => {
  const el = inputRef.current;
  // 先判断元素是否存在，不存在直接返回false
  if (!el) return false;
  return el.clientHeight < el.scrollHeight;
};

useEffect(() => {
  // DOM挂载完成后计算溢出状态，内容变化时也重新计算
  setIsOverflowing(checkOverflowing());
}, [review.comments]);

return (
  <>
    <div ref={inputRef} className="comment-for-user">{review.comments}</div>
    <div className="show-more-360">
      {isOverflowing && (
        <button className="show-more-button" onClick={handleEvent}>...show More</button>
      )}
    </div>
  </>
);

关键改动说明 #

1. 给useRef设初始值null，符合TypeScript类型规范，同时明确初始状态下没有DOM元素
2. checkOverflowing里增加空值判断，确保只有元素存在时才执行溢出计算
3. 用useState维护溢出状态，通过useEffect在DOM挂载后更新状态，避免渲染阶段依赖未就绪的DOM
4. useEffect依赖review.comments，保证评论内容变化时会重新判断溢出情况

内容的提问来源于stack exchange，提问作者Marvin Rivera