什么是 react-dimensions-cjs？
react-dimensions-cjs 是一个基于 React 的轻量级组件，用于在组件挂载时获取其宽度和高度，并在窗口大小变化时自动更新这些值。它支持 SSR（服务端渲染）和可选的自定义事件。
安装 react-dimensions-cjs
使用 npm 进行安装：
npm install react-dimensions-cjs
使用示例
我们将创建一个基本的示例组件，用于展示 react-dimensions-cjs 的基本用法。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -----------------------
----- ----------- ------- --------------- -
-------- -
----- - --------------- --------------- - - -----------
------ -
-----
--------------------
--------------------------------
---------------------------------
------
--
-
-
------ ------- --------------------------在上面的示例中，我们导入了 react-dimensions-cjs，然后用它来包装 MyComponent 组件。这将提供了两个属性：containerWidth 和 containerHeight，它们分别表示组件的宽度和高度。
定义自定义事件
我们还可以定义自定义事件，以在容器尺寸发生变化时执行特定操作。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- - ---------------- ---------------- -- -
------------------------------------------------------------
--
-------- -
----- - --------------- --------------- - - -----------
------ -
-----
--------------------
--------------------------------
---------------------------------
------
--
-
-
------ ------- ------------
-- -- -------
-- ----
-- ----- -------- - ------------------ - ----------
-- ---------- ---------
--------- -------------
----------------总结
通过 react-dimensions-cjs，我们可以方便地在 React 组件中获取它们的大小，并在窗口大小变化时更新值。此外，我们还可以定义自定义事件，以在容器尺寸发生变化时执行特定操作。这个简单而实用的组件在前端开发中十分有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e781e8991b448d78f2