react获取div大小

在React中获取一个div的大小，可以利用React的引用（ref）功能，以及浏览器提供的DOM属性或者使用ResizeObserver API。以下是两种常用的方法：

1. 使用ref和回调函数获取：
你可以创建一个ref，并将其附加到你想要获取大小的div元素上。然后，在一个事件处理器或组件的生命周期方法中，通过ref当前的DOM节点来读取其大小属性，如`offsetWidth`和`offsetHeight`。

示例代码：

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

   function UseSize() {
     const divRef = useRef(null);

     useEffect(() => {
       const divElement = divRef.current;
       if (divElement) {
         console.log(`宽度: ${divElement.offsetWidth}, 高度: ${divElement.offsetHeight}`);
       }
     }, []);

     return <div ref={divRef}>这个div的大小是: {divRef.current ? `${divRef.current.offsetWidth}x${divRef.current.offsetHeight}` : '加载中...'}</div>;
   }

   export default UseSize;

2. 使用ResizeObserver API：
从现代浏览器开始支持的`ResizeObserver`是一个更为现代的方法来监听元素大小的变化。它允许你在元素大小变化时得到通知，而不是定时轮询或者在事件发生时获取。

示例代码：

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

   function UseResizeObserver() {
     const divRef = useRef(null);

     useEffect(() => {
       const resizeListener = (entries) => {
         const { width, height } = entries[0].contentRect;
         console.log(`宽度: ${width}, 高度: ${height}`);
       };

       const resizeObserver = new ResizeObserver(resizeListener);
       if (divRef.current) {
         resizeObserver.observe(divRef.current);
       }

       return () => {
         if (divRef.current) {
           resizeObserver.unobserve(divRef.current);
         }
       };
     }, []);

     return <div ref={divRef}>这个div的大小是: {divRef.current ? `${divRef.current.offsetWidth}x${divRef.current.offsetHeight}` : '加载中...'}</div>;
   }

   export default UseResizeObserver;