چگونه ارتفاع یک المنت را در ReactJS بدست بیارم؟

برای اینکه ارتفاع یک المنت رو توی ReactJS بدست بیاری، می‌تونی از useRef و useEffect استفاده کنی. اول از همه، یه ریف ایجاد می‌کنی که به اون المنت مورد نظر متصل بشه و بعد از اینکه کامپوننت رندر شد، می‌تونی ارتفاع رو از طریق اون ریف بگیری. اینجا یه مثال می‌زنم تا کامل برات روشن بشه:

import React, { useRef, useEffect, useState } from "react";
const MyComponent = () => {
  // Create a ref for the element
  const elementRef = useRef(null);
  // Create a state to hold the height
  const [height, setHeight] = useState(0);
  useEffect(() => {
   // When the component is mounted, get the height
   if (elementRef.current) {
   setHeight(elementRef.current.clientHeight);
}
}, []);
return (
  <div>
    <div ref={elementRef}>
    {/* This is the element you want to measure */}
      This is the element with dynamic height
    </div>
    <p>The height of the element is: {height}px</p>
  </div>
);
};
export default MyComponent;

اینجا اول با استفاده از useRef یک ریف برای المنت ایجاد کردیم و این ریف رو به المنت مورد نظر متصل کردیم. بعد، با استفاده از useEffect و وقتی که کامپوننت به طور کامل رندر شد، ارتفاع المنت رو از طریق elementRef.current.clientHeight گرفتیم و اونو داخل یه state ذخیره کردیم تا بتونیم به راحتی ازش استفاده کنیم و نمایش بدیم.