using ref to get the height of an element in react-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript css

using ref to get the height of an element in react

author：jiyik last updated：2025/03/07 views：

use ref in react to get the height of an element:

initializes the state variable that will store the element's height.
useeffect()update the element's height in the hook .
the height should be set to ref.current.clientheight.

import {useeffect, usestate, useref} from 'react';

export default functionapp() {
  const [divheight, setdivheight] = usestate(0);

  const ref = useref(null);

  useeffect(() => {
    setdivheight(ref.current.clientheight);
    console.log('height: ', ref.current.clientheight);

    console.log('width: ', ref.current.clientwidth);
  }, []);

  return (
    <divref={ref}><h2>someh2><h2>contenth2><h2>{divheight}h2>div>
  );
}

we useeffectget the element's height in the hook because we need to wait for the ref to be set and wait for the div element clientheightto be rendered to the dom before accessing its height property.

clientheightthe property returns the intrinsic height of an element in pixels. this property includes padding but does not include borders, margins, and horizontal scroll bars.

alternatively, we can use offsetheightthe property, which returns the height of the element in pixels, including vertical padding and border.

useeffect(() => {
  setdivheight(ref.current.offsetheight);
  console.log('height: ', ref.current.offsetheight);

  console.log('width: ', ref.current.offsetwidth);
}, []);

the second argument we pass to the useeffect hook is an array of dependencies. we only want to set the divheight state variable after the component mounts, so we use an empty array.

useref()the hook can be passed an initial value as an argument. the hook returns a mutable ref object whose .current property is initialized to the passed argument.

请注意, we have to access the current property of the ref object in order to access the div element on which we set the ref attribute.

when we pass a ref prop to an element, for example

, react sets the ref object’s .current property to the corresponding dom node.

userefthe hook creates a normal javascript object but gives you the same ref object on every render. in other words, it's almost a memoized object value with a .current property.

it’s important to note that when you change the value of the current property of ref, it won’t cause a re-render, so we don’t have to useeffectadd it in the dependencies.

the key time to get the height of an element using a ref is useeffectto do it in the hook, after the ref is set and the element is rendered to the dom.

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

publish date：2025/03/07 views：133 category：react

在 react 中使用 ref 改变元素的样式：在元素上设置 ref 属性。通过 ref 上的 current 属性访问元素。更新元素的样式，例如 ref.current.style.backgroundcolor = green 。 import {useref} from react ; cons

setting and accessing state with dynamic keys in react

publish date：2025/03/07 views：67 category：react

使用方括号表示法在 react 中使用动态键设置和访问状态，例如 setemployee({...employee, [key]: employee.salary 100}) 。方括号中的变量或表达式将在设置状态之前进行评估。 import {usestate} from

add an event listener to the body element in react

publish date：2025/03/07 views：131 category：react

向 body 元素添加事件监听器：访问文档对象上的 body 元素。在 useeffect 钩子中对 body 元素使用 addeventlistener() 方法。当组件卸载时移除事件侦听器。 import {useeffect} from react ; export defa

check if an element is in the viewport in react.js

publish date：2025/03/07 views：89 category：react

在 react.js 中检查元素是否在 viewport 中：在元素上设置 ref 属性。使用 intersectionobserver api 来跟踪元素是否相交。 app.js import {useeffect, useref, usestate, usememo} from react ; export default function

publish date：2025/03/07 views：161 category：react

要在 react 中按下 enter 键时获取输入的值：在输入字段上设置 onkeydown 属性。当用户按下一个键时，检查该键是否为 enter 。从状态变量访问输入字段的值。 import {usestate} from react ; co

publish date：2025/03/06 views：154 category：react

要使用钩子清除 react 中的 timeout 或 interval：使用 useeffect 钩子设置超时或间隔。从 useeffect 钩子返回一个函数。使用 cleartimeout() 或 clearinterval() 方法删除组件卸载时的超时。、 import

publish date：2025/03/06 views：113 category：react

在 react 中检查一个 prop 是否传递给了一个组件：将 prop 与 undefined 进行比较。如果 prop 等于 undefined ，则它不会传递给组件。否则，它被传递给组件了。 const button = ( {withicon} ) = { if

encountered two children with the same key error in react

publish date：2025/03/06 views：61 category：react

当我们从 map() 方法返回的两个或多个元素具有相同的键属性时，会出现 react 错误 encountered two children with the same key 。要解决该错误，需要为每个元素的 key prop 提供唯一值或使用 index

export multiple components from a file in react.js

publish date：2025/03/06 views：134 category：react

使用命名导出在 react 中导出多个组件，例如 export function a() {} 和 export function b() {} 。可以使用命名导入导入导出的组件，如 import {a, b} from ./another-file 。我们可以在单个文件中根据需

using ref to get the height of an element in react-ag捕鱼王app官网