介绍
在使用 React 进行页面开发过程中，经常会遇到组件高度不确定的问题，这使得在使用动态效果时，页面的布局往往会出现问题。解决这个问题的一个有效方式就是使用 react-hold-height 包。这个包能够在组件的高度发生变化时，保持它的高度，并等待内容加载完毕之后再进行渲染。这样，开发者就可以在不破坏布局的情况下，畅意地使用动态效果了。
安装及使用
要使用 react-hold-height，首先需要它支持 React 的版本。目前它支持 React 的 16.8.0 版本及以上。
- 安装
在你的 React 项目中，使用以下命令来安装 react-hold-height 包：
npm install --save react-hold-height
- 使用
使用 react-hold-height 包的方法十分简单。只需要将你需要保持高度的组件用 <HoldHeight> 包裹一下即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------
----- ---------------- - -- -- -
------ -
------------
-----
-------------
------
-------------
--
--在这个示例中，<HoldHeight> 组件的内部包含了需要进行高度保持的组件。在使用 <HoldHeight> 的过程中，只需要确保你需要进行高度保持的组件是其子组件即可。使用这个方法的结果是，在内容加载完毕之前，<HoldHeight> 组件会以一个占位符的形式显示在页面上。
示例
下面是一个简单的示例，用以说明 react-hold-height 包的使用方法。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------
----- ---------------- - -- -- -
------ -
---- ----------------------
-------------
------------
---- --------------------
------------------ ----- ----- --- ----- ----------- ---------- ----- --- -- ------ ---- ---- ------- ---------- ----- ---- ------ --------- --- --------- ----- --------- --- ------ ----- ------- ------ ----- ---- --------- ------ -------- --- ---- -- ------------- --- ------ ------ -- ---- ------- ---------- ------- -------- ------ --- --------- --------- ---- --------- ----- -- -------- ------- ---- ----- ------ ----- -- ------- ---- ------ ---- ---- --- ------- ----- -- ------ ------- --- ----------- ----- -------- --------- ---------- ---- --- ---- ------ --------- -- ---- -------- ------ ------- -------- ---- ---- --- ------
------
-------------
------
--
--
------ ------- -----------------这里我们定义了一个叫做 ExampleComponent 的组件，在这个组件内，我们使用了 <HoldHeight> 组件来保持了高度不确定的 <div> 组件的高度。在这个示例中，当内容加载完毕之前，<HoldHeight> 组件会以一个占位符的形式显示在页面上。
总结
react-hold-height 包是一个十分实用的工具包，在开发高度不确定的组件的过程中，使用它可以避免因为高度的改变而导致页面布局出现异常的情况。在使用 react-hold-height 的过程中，只需要将需要进行高度保持的组件用 <HoldHeight> 包裹一下即可。对于 React 开发者来说，这是一个值得推荐的工具包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665281e8991b448e2771