实现一个基于ResizeObserver自动计算宽高的React组件

);};馃З鐜板湪涓氬姟鍦烘櫙澶т簡涓€浜涗笟鍔″満鏅渶瑕佸吋瀹瑰ぇ鏁版嵁锛屾瘮濡傚ぇ鏁版嵁琛紝澶ф暟鎹爲锛屽ぇ鏁版嵁涓嬫媺妗嗙瓑绛夛紝鎵€鏈夊ぇ鏁版嵁缁勪欢闇€瑕佹寚瀹氬搴﹀拰楂樺害銆傚疄闄呬笟鍔＄晫闈㈠ぇ閮ㄥ垎闇€瑕佸疄鏃惰绠楀楂橈紝鑰宺eact-auto-sizer灏辨槸瀹屾垚鑷姩璁＄畻瀹介珮鐨勪换鍔°€傪煣戔€嶐煉诲湪缂栫爜瀹炵幇棰勭爺涔嬪垵锛宺esize鏄粦瀹歸indows鐨勶紝浣嗘槸鍥犱负resize浼氭敼鍙榳indow锛屾墍浠ヤ細鏈夋€ц兘闂锛屽湪涓€浜涙瀬绔殑鍍忕礌鎯呭喌涓嬩細鍑虹幇鎶栧姩锛汻esizeObserver锛屾帴鍙ｅ彲浠ョ洃鍚唴瀹瑰尯鍩熺殑Element鎴朣VGElement鐨勮竟鐣屾鐨勫彉鍖栥€傚唴瀹瑰尯鍩熼渶瑕佸噺鍘诲唴杈硅窛濉厖銆?-鎬荤粨MDNResizeObserverheavenchoice锛屼娇鐢╮eacthookuseEffect锛屾牳蹇冧唬鐮佸涓嬶細constupdateState=useCallback((newWidth:number,newHeight:number,entry:ResizeObserverEntry)=>{//绠€鍐欐洿鏂扮姸鎬?/宸﹀彸杞瑆idth,heightprops.onResize({width:newWidth,height:newHeight},entry);},[childParams,disableHeight,disableWidth,onResize],);constobserver=useMemo(()=>newResizeObserver((entries:ResizeObserverEntry[])=>{for(constentryofentries){constcontentRect=entry.contentRect;constwidth=Math.trunc(contentRect?.width||0);constheight=Math.trunc(contentRect?.height||0)updateState(width,height,entry);}}),[updateState],);useEffect(()=>{if(!_autoSizerRef?.current?.parentNode){thrownewError('NotFoundAutoSizerparentNode')}observer.observe(_autoSizerRef?.current?.parentNodeasElement);return()=锛咷鍚?{observer.disconnect();};},[瑙傚療鑰匽);閲嶇偣锛歰bserver.observe(_autoSizerRef?.current?.parentNodeasElement)锛岀洃鍚埗dom鑺傜偣contentRect锛歊esizeObserverEntry杩斿洖DOMRectReadOnly鐨勫彧璇诲睘鎬ontentRect锛屽寘鍚瑙傚療鍏冪礌鏂板昂瀵哥殑瀵硅薄锛宲roperties:{"x":0,"y":0,"width":300,"height":200,"top":0,"right":300,"bottom":200,"left":0}contentRect杩斿洖contentbox锛屼篃灏辨槸鍐呭鍖哄煙鐨勫ぇ灏忥紙鍏蜂綋鍙互鍙傝€冨紶鏂版棴鑰佸笀瀵筊esizeObserver鐨勪粙缁嶏級锛屾墍浠ontentRect.width鍜宑ontentRect.height灏辨槸鎴戜滑鏈€缁堥渶瑕佺殑瀹藉害High馃惓鐨勬潵婧愮伒鎰焤eact-virtualized-auto-sizerResizeObserver妫€娴婦OM澶у皬鍙樺寲JSAPIResizeObserver馃悹Hydrology浠ュ線涓嶉渶瑕侀€掑綊鐢熸垚鏃犻檺灞傛鏍戝熀浜巕iankun寰墠绔疄闄呴儴缃?/p>