React/Next.js中根据元素高度控制“More...”按钮显隐的问题

核心问题点 #

• <p>标签不支持onLoad事件，这个事件仅针对图片、脚本等需要加载外部资源的元素，所以你的setContent永远不会触发。
• 你在组件渲染阶段直接调用needsMoreButton()，此时组件还未完成DOM挂载，myRef.current还没被赋值，所以打印出来是null。同时这种写法会导致每次组件渲染都执行该函数，完全不符合逻辑。

修正后的代码实现 #

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

const MyText = (props) => {
  const [showMoreButton, setShowMoreButton] = useState(false);
  const textRef = useRef(null);

  // 计算是否需要显示"More..."按钮
  const checkNeedMoreButton = () => {
    if (!textRef.current) return;
    // scrollHeight是元素内容的总高度，clientHeight是元素可见高度
    const isOverflowing = textRef.current.scrollHeight > textRef.current.clientHeight;
    setShowMoreButton(isOverflowing);
  };

  // 组件挂载后执行一次，内容变化时也重新计算
  useEffect(() => {
    checkNeedMoreButton();
    // 如果文本内容是props传入的，要把props.text加入依赖数组
    // }, [props.text]);
  }, []);

  return (
    <div>
      <p ref={textRef} className="max-h-20 overflow-hidden">
        {props.text || "If it has multiple lines of text, to show 'More...' and if it has only one line of text, not to show 'More...'"}
      </p>
      {showMoreButton && <button>More...</button>}
    </div>
  );
};

export default MyText;

关键改动说明 #

1. 替换onLoad为useEffect：利用useEffect在组件挂载完成后（DOM已生成）去获取元素并计算高度，这是React中操作DOM的正确时机。
2. 正确判断溢出：通过比较元素的scrollHeight（内容总高度）和clientHeight（元素可见高度），判断文本是否超出容器，从而决定按钮显示状态。
3. 状态管理优化：直接用showMoreButton状态存储按钮的显示逻辑，不需要存整个DOM元素。
4. 依赖数组处理：如果你的文本内容是通过props传入的，记得把props.text加入useEffect的依赖数组，这样文本变化时会重新计算是否需要显示按钮。

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