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

Question

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

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

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

Answer 1

你可以使用这个钩子，但取决于你想要支持的浏览器： https : //github.com/rehooks/component-size

你可以这样做：

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

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