简介
react-window-detect-dimensions 是一个 React 组件，适用于检测浏览器窗口大小的变化。该组件可以方便地让开发者监测浏览器窗口大小的变化，从而响应式地调整页面布局。
安装
在安装 react-window-detect-dimensions 之前，需要先安装 React:
npm install --save react
然后，再安装 react-window-detect-dimensions :
npm install --save react-window-detect-dimensions
使用
在需要使用 react-window-detect-dimensions 的组件中引入该组件:
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------------- ---- ---------------------------------
----- ----------- - -- -- -
----- ------------ - ------- ------- -- -
------------------- -------- ------- ------------
-
------ -
-----
----------------------- -------------------------
------
--
-WindowDetectDimensions 接收一个 onResize 回调函数，在浏览器窗口大小变化后或初次渲染后会触发该回调函数。
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------------- ---- ---------------------------------
----- ----------- - -- -- -
----- ------- --------- - ----------------------------------
----- ------------ - ------- ------- -- -
----------------
-
------ -
-----
----------------------- -------------------------
---------- ------ ------ -------------
------
--
-在上面的例子中，我们利用 useState 钩子保存了当前浏览器窗口的宽度信息，并在 WindowDetectDimensions 的回调函数中更新了该状态信息。最后，我们在页面上显示了当前浏览器窗口的宽度。
总结
react-window-detect-dimensions 可以帮助开发者监测浏览器窗口大小的变化，从而响应式地调整页面布局。使用该组件非常简单，只需要在需要使用的组件中引入该组件，并设置 onResize 回调函数即可。
注意事项：
react-window-detect-dimensions应该放在组件的外面，这样它可以监测到整个页面的窗口变化。onResize回调函数中返回的是新的窗口大小，宽度和高度分别表示为width和height。- 实际开发中，建议使用函数式组件和 React Hooks。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedacb5b5cbfe1ea0610ae7