将 ref 与高度一起使用

Question

我想知道如何在加载时获取 useRef 宽度和高度以及它何时更改。

我正在尝试将组件的确切尺寸传递给它的子组件。

MapContainer.js

const mapComponent = useRef(null);
const [mapWidth, setMapWidth] = useState(0);
const [mapHeight, setMapHeight] = useState(0);

useEffect(() => {
    if (mapComponent.current !== null) {
      setMapWidth(mapComponent.current.clientWidth);
      setMapHeight(mapComponent.current.clientHeight);
    }
  }, [mapComponent]);

<div className={`bg-white rounded-[32px] overflow-hidden relative`} ref={mapComponent}>
   <Map
     style="mapbox://styles/ayagoumi/ckyvm0dx5001714mplg2y1oz7"
     zoom={zoom}
     center={position}
     movingMethod="easeTo"
     containerStyle={{
       height: `${mapHeight}px`, // this is what i want to change
       width: `${mapWidth}px`, // this is what i want to change
       borderRadius: "32px",
       zIndex: "0",
       overflow: "hidden",
     }}
   >
   </Map>
</div>

Index.js

<section className="flex flex-wrap justify-between w-full gap-4 xl:flex-nowrap">
     <div></div>
     <div className="flex flex-col order-2 gap-4 sm:flex-row grow">
       <MapContainer styles="w-full md:!w-[50%] lg:w-full min-w-[300px] min-h-[300px] order-2 rounded-[32px] overflow-hidden"></MapContainer>
     </div>
</section>

但是我采用的这种方法并没有在父宽度改变时得到宽度和高度

Answer 1

为了得到调整后的新宽高，需要监听window的resize事件，例如：

const Map = () => {
  const mapComponent = useRef(null);
  const [mapWidth, setMapWidth] = useState(0);
  const [mapHeight, setMapHeight] = useState(0);
  
  const onResize = () => {
    const rect = mapComponent.current.getBoundingClientRect();
    if (rect) {
      setMapWidth(rect.width);
      setMapHeight(rect.height);
    }
  };

  useEffect(() => {
    onResize();
    window.addEventListener('resize', onResize);
  }, []);

  return (
    <div ref={mapComponent}>
      <Child width={mapWidth} height={mapHeight}>A</Child>
      <Child width={mapWidth} height={mapHeight}>B</Child>
      <Child width={mapWidth} height={mapHeight}>C</Child>
      <Child width={mapWidth} height={mapHeight}>D</Child>
    </div>
  );
};

将 ref 与高度一起使用

Use ref with and height

mapbox

reactjs

mapbox-gl-js

next.js

use-ref