React Leaflet Legend with MapContainer

Question

早上好，我知道有一个副本，但建议的解决方案不起作用，我想把一个简单的图例与MapContainer，你能帮我一个忙，使与反应传单3.x的图例组件？

版本React-Leaflet 3.1.0这是我的地图

<MapContainer
    style={{ height: 480, width: "97.5%" }}
    zoom={2}
    center={[30.09, 51.505]}
    scrollWheelZoom={false}
    fadeAnimation={true}
    markerZoomAnimation={true}
  >
    <TileLayer
      url={urlLayer}
      test="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Legend />
    <CircleMarker
      center={[51.505, -0.09]}
      color={"#000000"}
      fillColor={"#FDD876"}
      stroke={true}
      fillOpacity={true}
      weight={1}
    >
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </CircleMarker>

   </MapContainer>

Answer 1

我插入带有地图钩子的whenCreated

  const [map, setMap] = useState(null);
<MapContainer
    style={{ height: 480, width: "97.5%" }}
    zoom={2}
    center={[30.09, 51.505]}
    scrollWheelZoom={false}
    fadeAnimation={true}
    markerZoomAnimation={true}
    whenCreated={setMap}
  >

图例

import L from "leaflet";
import { useEffect } from "react";
import './LegendComponent.css'
function Legend({ map }) {
  console.log(map);
  useEffect(() => {
    if (map) {
      const legend = L.control({ position: "bottomright" });

      legend.onAdd = () => {
        const div = L.DomUtil.create("div", "info legend");
        div.innerHTML =
          "<h4>This is the legend</h4>" +
          "<b>Lorem ipsum dolor sit amet consectetur adipiscing</b>";
        return div;
      };

      legend.addTo(map);
    }
  }, [map]); //here add map
  return null;
}

export default Legend;