将值从页面发送到组件(NEXT.JS + LEAFLET)

// pages/index.js
import React, { useState } from 'react';
import MapComponent from '../components/MapComponent';

export default function Home() {
  const [location, setLocation] = useState({ lat: 51.505, lng: -0.09 });

  return (
    <div>
      <h1>Leaflet Map Example</h1>
      <MapComponent center={location} />
    </div>
  );
}

// components/MapComponent.js
import React from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default function MapComponent({ center }) {
  const mapRef = React.useRef(null);

  React.useEffect(() => {
    if (!mapRef.current) {
      mapRef.current = L.map('map').setView(center, 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      }).addTo(mapRef.current);
    }

    L.marker(center).addTo(mapRef.current)
      .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      .openPopup();

    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
      }
    };
  }, [center]);

  return <div id="map" style={{ height: '400px', width: '100%' }}></div>;
}