Javascript 是否可以使用上下文和引用全局存储react元素的维度？

背景：我目前正在从事一个react项目，其中包括一个边栏组件，用于显示某种内容。侧边栏本身从右侧滑入，并在网页上的现有内容上滑动。我正在使用门户将侧边栏呈现到页面的主内容容器中，而不管组件在React DOM中的位置如何。侧边栏有一个固定的位置，到目前为止，我已经创建了一些不太优雅的钩子，用于测量页面标题的高度，使用普通javascript，以便侧边栏不覆盖标题。这很有效。但是，设计器现在请求了一个固定位置的底部状态栏，用于显示来自API调用的响应消息。为了使状态栏在打开时不会笨拙地覆盖侧栏，我想使用上下文全局存储状态栏元素的当前高度（我假设状态栏在应用程序中只呈现一次）。然而，这需要我能够在引用的React组件的大小调整时更新上下文存储

实际问题：在调整组件大小时，是否可能使React组件引用触发副作用（使用useEffect），或者以任何其他方式使用侦听器进行调整组件大小时触发的引用？如果没有，你会提出其他的建议吗

---

注意：如果我的问题没有意义或需要更多信息，请随时提问

您可以使用这个钩子，但这取决于您希望支持的浏览器：

你可以这样做：

const ref = useRef(null)
const size = useComponentSize(ref)

React.useEffect(() => {
// do something with size
}, [size]);

---

只需为

resize

事件添加一个事件侦听器，另外，请提供一个可生成的示例，如SO问题所预期的：，即向我们展示一个滑块，询问如何为其添加resize事件，并展示一些解决方法。据我所知，

resize

仅适用于文档视图，而不适用于元素。在调整视图大小时检查元素高度是我目前用于检查页眉高度的不太优雅的解决方案。