使用ResizeObserver API实现：实时监听类型为某div盒子的宽度，并设置高度等于该盒子的宽度

怕冷的火焰（~杰）

已于 2024-04-02 13:50:05 修改

阅读量130

点赞数 2

分类专栏： React 前端文章标签： react.js 前端

于 2024-04-02 13:49:47 首次发布

本文链接：https://blog.csdn.net/weixin_50236973/article/details/137267613

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

React

36 篇文章 0 订阅

订阅专栏

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const contentRef = useRef(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
        const width = entry.contentRect.width;
        contentRef.current.style.height = `${width}px`;
      });
    });

    if (contentRef.current) {
      resizeObserver.observe(contentRef.current);
    }

    return () => {
      if (contentRef.current) {
        resizeObserver.unobserve(contentRef.current);
      }
    };
  }, []); // 只在组件挂载和卸载时执行

  return (
    <div className="content" ref={contentRef} style={{ width: '100%' }}>
      {/* 内容 */}
    </div>
  );
};

export default MyComponent;
```

在上面的代码中，我们使用useRef钩子来创建一个ref对象，用于引用content元素。然后在useEffect钩子中，我们创建一个ResizeObserver实例，监听content元素的大小变化。当content元素的宽度发生变化时，我们将高度设置为相应的宽度。