在前端开发中，我们经常需要对各种组件进行计算和布局，通常需要用到它们的尺寸、位置等信息。在 React 中，我们可以通过 ref 这个特殊属性来访问组件的 DOM 元素，然后通过其 clientWidth、clientHeight 等属性获取它们的尺寸信息。但这些尺寸信息并不总是准确的，因为一些组件的尺寸是在运行时动态计算的，并且在挂载或卸载的过程中可能会发生变化。
为了更方便地获取组件的尺寸信息，我们可以使用一个名为 react-container-dimensions 的 npm 包。它提供了一个 ContainerDimensions 组件，可以帮我们自动监听容器大小的变化，并将其尺寸信息作为 props 传递给子组件。下面让我们来看一下如何使用它。
安装
首先打开你的终端，切换到你的项目目录下，然后使用以下命令来安装 react-container-dimensions：
$ npm install react-container-dimensions --save
使用
使用 ContainerDimensions 组件非常简单。只要将你的要监听尺寸变化的组件包裹在它的子组件中即可，然后就可以通过 props 得到组件的尺寸信息。以下是它的基本用法示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- -----------------------------
----- ----------- - ----- -- -
----- - ------ ------ - - --------------------------
------ ------- ----- -- ------- --- -- ------ -- ----------------
--
----- --- - -- -- -
---------------------
--- ------ ------ -- -- -
------------ ---------------------- ------ ------ -- --
--
----------------------
--在这个示例中，我们定义了一个 MyComponent 组件，它通过 props 获取其容器的宽度和高度，并将它们渲染成一个文本。然后我们在 App 中使用 ContainerDimensions 组件包裹 MyComponent，并将得到的宽度和高度作为 props 传递给它。
高级用法
除了基本用法之外，react-container-dimensions 还提供了很多其他的功能和用法，例如：
传递额外 props
除了 containerDimensions 之外，ContainerDimensions 还可以接受一些额外的 props，这些 props 将会被传递给渲染的子组件。例如：
<ContainerDimensions style={{ border: '1px solid red' }}>
{({ width, height }) => (
<div>My width is {width} and my height is {height}.</div>
)}
</ContainerDimensions>在这个示例中，我们传递了一个 style props，将其传递给了 ContainerDimensions 的子组件，并且将该组件的边框设置为红色的实线。这个组件也可以是一个自定义的组件，它将得到 ContainerDimensions 的尺寸信息，以及其他传递过来的 props，例如 className 等。
支持自定义容器
默认情况下，ContainerDimensions 会将尺寸信息传递给其直接的子组件。但是，如果我们希望将尺寸信息传递给一个不同的组件或 DOM 元素，我们可以通过传递一个回调函数来实现。这个回调函数接受一个参数，即要监听尺寸变化的 DOM 元素，我们可以根据这个元素返回任何组件或元素。例如：
<ContainerDimensions>
{({ width, height }, myRef) => (
<div ref={myRef}>My width is {width} and my height is {height}.</div>
)}
</ContainerDimensions>在这个示例中，我们定义了一个回调函数，它接受第二个参数 myRef，这个参数是一个函数，返回一个 DOM 元素的引用。我们将其赋值给 div 元素的 ref 属性，这样就可以获得这个元素的尺寸信息。你也可以根据需求返回其他的组件或元素。
自定义监听逻辑
默认情况下，ContainerDimensions 会监听其容器元素的 resize 事件，并自动更新尺寸信息。但是，如果我们希望根据自己的逻辑来更新尺寸信息，例如在滚动时更新尺寸，我们可以传递一个 updateOn prop。这个 prop 是一个字符串数组，它可以接受以下值：
- 'resize'：当容器元素的大小发生变化时更新尺寸信息（默认值）。
- 'orientationchange'：当容器元素的方向发生变化时更新尺寸信息。
- 'debounce'：当容器元素的尺寸发生变化后，等待一段时间再更新尺寸信息。我们可以通过传递 delay prop 来设置等待时间。
- 'throttle'：当容器元素的尺寸发生变化后，每隔一段时间再更新一次尺寸信息。我们可以通过传递 delay prop 来设置这个时间。
例如：
<ContainerDimensions updateOn={['debounce']} delay={300}>
{({ width, height }) => (
<div>My width is {width} and my height is {height}.</div>
)}
</ContainerDimensions>在这个示例中，我们传递了一个 updateOn={['debounce']}，它表示在容器元素的尺寸发生变化后，等待 300 毫秒再更新尺寸信息。
总结
以上是关于 react-container-dimensions npm 包的使用教程。我们看到，它可以帮助我们方便地获取组件的尺寸信息，而不用担心其准确性。除了基本用法之外，它还提供了很多高级用法，例如传递额外 props、自定义容器、自定义监听逻辑等。它的使用非常简单，但非常实用，是 React 前端开发中的一个良好工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-the-container-dimensions