在使用 React 开发 web 应用时，通常会遇到需要获取某个元素的渲染尺寸的情况。虽然可以通过浏览器的开发者工具来查看，但对于一些动态结果的元素，我们需要在代码中获取它的渲染尺寸，这时候我们可以使用 npm 包 react-rendered-size 来实现。
1. react-rendered-size 简介
react-rendered-size 是一个简单的 React 组件，它会将一个子组件渲染出来，并返回其渲染后的尺寸。它可以帮助我们在不需要真正渲染出 DOM 元素的情况下，获取元素的渲染尺寸。
2. 安装和使用
我们可以通过 npm 安装 react-rendered-size：
npm install react-rendered-size
安装完成后，我们可以在代码中引入它：
import { RenderedSize } from 'react-rendered-size';然后在需要使用的地方，将渲染出元素的代码放到 RenderedSize 组件的子组件中：
const MyComponent = () => (
<RenderedSize>
<div style={{ width: '30px', height: '50px' }}>这是一段文本。</div>
</RenderedSize>
);渲染出来的结果如下：
这时候，可以通过 RenderedSize 组件的 onRendered 回调函数来获取渲染后元素的尺寸。比如：
-- -------------------- ---- -------
----- ----------- - -- -- -
----- ------ -------- - ---------- ------ -- ------- - ---
----- ---------- - ------------ -- -
----------------------
--
------ -
--
------------- ------------------------
---- -------- ------ ------- ------- ------ ----------------
---------------
----------------------------------------
---
--
--3. 更多高级用法
3.1 改变容器的 DOM 元素
RenderedSize 组件默认使用一个 div 元素作为容器来渲染子组件。如果需要改变容器元素，可以使用 RenderedSize 的 containerProps 参数。比如，如果需要使用 span 元素作为容器，可以这样写：
<RenderedSize containerProps={{ tagName: 'span' }}>
<div style={{ width: '30px', height: '50px' }}>这是一段文本。</div>
</RenderedSize>3.2 处理动态变化的尺寸
如果在 RenderedSize 组件中渲染的组件的尺寸是动态变化的，我们可以使用一个 key 值来强制重新渲染组件。比如：
-- -------------------- ---- -------
----- ----------- - -- -- -
----- ------ -------- - --------------------
----- ---------- - ------------ -- -
--------------------------
--
------ -
--
------- ----------- -- ------------ - ------------
----
---------
------------- ---------- ------------------------
---- -------- ------ ------- ------- ------ ---------------
---------------
---
--
--3.3 处理异步渲染的组件
如果需要异步渲染组件，可以使用 React 的 Suspense 和 lazy。但在使用 RenderedSize 组件时，需要注意将其包裹在 Suspense 中，并使用 fallback 属性来指定异步加载时需要显示的组件。
-- -------------------- ---- -------
------ - --------- ---- - ---- --------
----- --------------- - ------- -- -----------------------------
----- ----------- - -- -- -
--------- ------------------------------
--------------
---------------- --
---------------
-----------
--4. 总结
在 React 开发中，获取元素的渲染尺寸是一个常见的需求。使用 react-rendered-size 这个 npm 包可以方便地获取元素的尺寸，避免了不必要的 DOM 操作。希望这篇文章可以帮助你更好地理解和使用 react-rendered-size。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e1d9381d61a3540945