Mapbox:如何在地图的已加载事件上访问react的组件属性

import React, { useState } from "react";
import ReactMapGL, { Marker } from "react-map-gl";

const MapboxExample = () => {
  const [viewport, setViewport] = useState({
    width: "100%",
    height: 400,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  });

  const handleMapLoad = () => {
    // 在地图加载完成后执行的逻辑
    // 可以在这里访问React组件的属性
    console.log("React组件属性:", viewport);
  };

  return (
    <ReactMapGL
      {...viewport}
      onViewportChange={setViewport}
      onLoad={handleMapLoad}
      mapboxApiAccessToken={YOUR_MAPBOX_ACCESS_TOKEN}
    >
      {/* 在地图上添加其他组件或标记 */}
      <Marker latitude={37.7577} longitude={-122.4376}>
        <div>标记</div>
      </Marker>
    </ReactMapGL>
  );
};

export default MapboxExample;