React中使用useRef获取CSSStyleDeclaration无值，无法读取元素line-height怎么办

• HTMLElement.style 仅能读取元素行内样式（即直接写在标签style属性中的样式规则），如果你的line-height是通过外部CSS文件、内部<style>标签、CSS-in-JS等非行内方式定义，该API无法获取到对应值。

你需要使用window.getComputedStyle()API获取元素最终生效的计算样式，同时要保证获取逻辑在DOM完成挂载后执行，建议放在useEffect钩子中。

示例代码 #

import { useRef, useEffect } from 'react';

function DemoComponent() {
  const titleTextRef = useRef(null);

  useEffect(() => {
    // 提前判断避免ref为空报错
    if (!titleTextRef.current) return;
    // 获取元素计算后的全量样式
    const computedStyle = window.getComputedStyle(titleTextRef.current);
    // 读取line-height属性，返回值为带单位的字符串，例如"24px"
    const titleLineHeight = computedStyle.lineHeight;
    
    // 后续你的业务逻辑，如需数值可做类型转换：
    // const lineHeightNum = parseInt(titleLineHeight, 10)
    console.log(titleLineHeight);
  }, []);
  // 如果元素的line-height会随状态动态变化，需要把对应的状态变量加到useEffect的依赖数组中

  return <h2 ref={titleTextRef}>要获取行高的标题文本</h2>;
}

• 如果元素是条件渲染的，需要保证获取样式时元素已经被挂载到DOM树中，否则会返回空值
• 部分场景下line-height返回值可能是无单位的倍数（例如继承了父级的无单位行高配置），类型转换时建议用parseFloat()兼容处理

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