自 v2.0.0 以来如何将道具传递给 React Leaflet.markercluster 选项？

Question

我试图通过 属性 和 <MarkerClusterGroup {...markerclusterOptions}>

by let markerclusterOptions 但我认为这不是一个好方法，因为它不起作用！

在文档中（# React leaflet markercluster v2.0.0）： 从现在开始，您不需要使用 options prop 将 Leaflet.markercluster option 传递给 <MarkerClusterGroup />.

我不明白该怎么做。

import React from 'react';
import MarkerClusterGroup from 'react-leaflet-markercluster';

let markerclusterOptions: {
  maxClusterRadius: 10;
  spiderfyDistanceMultiplier: 2;
  spiderfyOnMaxZoom: true;
  showCoverageOnHover: false;
  zoomToBoundsOnClick: true;
};
// == Composant
const Map: React.FC<Props> = ({ lights }) => (
  <div className="map">
    <MapContainer
      center={[46.362205, 1.523151]}
      zoom={5}
      minZoom={2}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=******"
      />
      <SetViewOnClick />

      <MarkerClusterGroup {...markerclusterOptions}>{
        
        lights.map((light) => (
          <Marker
            key={light.id}
            position={[light.latitude, light.longitude]}
            icon={iconPerson}
            
          >
            <Tooltip>
              Name: {light.user_description} (I{light.index}.G{light.group})
              <br />
              Power: {light.power_level} %
              <br />
              Rf Quality: {light.rfquality}/5
            </Tooltip>
          </Marker>
        ))       
      }
      </MarkerClusterGroup>

    </MapContainer>

  </div>
);

export default Map;

Answer 1

很可能是打字错误：

let markerclusterOptions: { // with colon ":" you declare a type
  maxClusterRadius: 10;
  spiderfyDistanceMultiplier: 2;
  spiderfyOnMaxZoom: true;
  showCoverageOnHover: false;
  zoomToBoundsOnClick: true;
}; // no assignment, value is undefined

应该是：

let markerclusterOptions = { // with equal you assign a value
  maxClusterRadius: 10,
  spiderfyDistanceMultiplier: 2,
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: true,
};