javascript - 为什么`ref.current.clientHeight`总是19

Question

<div className="scale" ref={ref}>如果我用 CSS将高度设置为 400 像素，我希望ref.current.clientHeight是 400 像素，但它始终是 19。

如何获得 div 的高度？

我的计划是将它设置为 100% 并且仍然知道 div 的高度。

.scale {
   height: 400px;
   display: block;
}

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

function Scale() {
  const [height, setHeight] = useState(0);
  const ref = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    if (ref.current && ref.current.clientHeight) {
      setHeight(ref.current.clientHeight);
    }
  });
  return (
    <div className="scale" ref={ref}>
      {height}
    </div>
  );
}

export { Scale };

它总是 19 的原因是所有的父 div、body 和 Html 都需要将它们的高度设置为100vh

标签： javascriptcssreactjstypescriptref