简介
React Dimensions 是一个 React 组件，它可以实时监测一个组件的尺寸和位置变化，并将其作为 props 传递给组件，以便组件做出不同的适应性变化。
安装
npm install react-dimensions --save
使用
基本使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- -------------------
----- --- ------- --------- -
-------- -
----- - --------------- --------------- - - -----------
------ -
-----
----------------------------
-----------------------------
------
--
-
-
------ ------- ------------------在上面的示例中，我们使用 Dimensions HOC（高阶组件）包装了 App 组件，并将其作为导出的组件。容器的宽度和高度可以在 this.props 中访问。当容器的尺寸发生变化时，Dimensions 组件会自动触发重新渲染。
属性
| 属性名 | 类型 | 描述 |
|---|---|---|
| containerWidth | number | （必须）容器宽度 |
| containerHeight | number | （必须）容器高度 |
| containerClassName | string | 容器 div 的 class 名称（可选） |
| containerStyle | Object | 容器 div 的 style 属性（可选） |
| elementResize | boolean | 是否监听 div 元素的 resize 事件（默认 true） |
| handleWidth | boolean | 是否监听容器宽度的变化（默认 true） |
| handleHeight | boolean | 是否监听容器高度的变化（默认 false） |
| onResize | function | 容器尺寸变化时的回调函数 |
| debounceInterval | number | 尺寸变化时回调的延迟时间（单位毫秒） |
| debounceMaxDurationMs | number | 回调的最大等待时间（单位毫秒） |
完整示例
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- -------------------
----- --- ------- --------- -
-------- -
----- - --------------- --------------- - - -----------
------ -
---- ----------------------
----------------------------
-----------------------------
------
--
-
-
------ ------- ------------
--------------- -
------- ---- ----- ------
-------- -------
------------- -----
--
------------ ------
----------------- ----
--------- -- --------------- --------------- -- -- -
----------------------------------- - ---------------------
-
--------在这个示例中，我们使用更多的属性来自定义 dimensions 高阶组件。通过设置容器的样式、禁用容器宽度的监听、调整回调延迟来控制组件的行为。我们还为 onResize 事件提供了回调函数，以在尺寸变化时打印出当前容器的宽度和高度。
总结
通过 react-dimensions，我们可以方便地根据父容器的尺寸和位置来调整子组件的表现。在开发具有适应性的响应式设计时，这个工具将会非常有用。在学习和使用的过程中，我们需要注意设置延迟、监听元素的 resize 事件以及使用回调函数来按需响应改变。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-dimensions