React是一个流行的JavaScript库，用于构建用户界面。在React中，获取DOM元素的高度是一项常见的任务。本文将介绍如何使用React来获取DOM元素的高度。
1. 使用ref
在React中，可以使用ref属性引用DOM元素。在渲染后，可以通过访问ref属性来访问元素的属性和方法，例如高度、宽度等。以下是示例代码：
------ ------ - ------- --------- - ---- --------
-------- ------------- -
----- ----- - -------------
------------ -- -
-- --------------- -
----------------------------------------
-
-- ----
------ ---- ----------------- ------------
-上述代码创建了一个名为MyComponent的函数组件，该组件包含了一个div元素，并将其赋值给了一个ref引用。在useEffect钩子函数中，通过访问offsetHeight属性来获取该元素的高度。
注意：由于需要在元素渲染后才能访问其高度，因此在useEffect函数中必须给依赖项列表传递一个空数组，以确保只在组件第一次渲染时获取高度。
2. 使用React-Measure库
除了使用ref属性，还可以使用第三方库React- Measure来获取元素的高度。该库使用ResizeObserverAPI来实时测量元素的大小。以下是示例代码：
------ ----- ---- -------- ------ - ---------- - ---- ---------------- -------- ------------- - ----- ----- - ------ -- - ------------- -------------------- ------ ---- --------------- ------------ -
上述代码使用了useMeasure钩子函数来获取元素的高度。该函数返回一个数组，其中包含两个值：ref和bounds。ref属性用于绑定要测量的元素，bounds属性提供了元素的尺寸信息。
3. 结论
以上介绍了两种在React中获取元素高度的方法。前者是使用ref属性，后者是使用第三方库React-Measure。无论使用哪种方法，都可以轻松地获取元素的高度并进行相应的处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29164