从v2.0.0开始，如何将道具传递到React传单.markcluster选项

Question

我试图用<MarkerClusterGroup {...markerclusterOptions}>传递属性

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

在文档中(#React传单markrcluster v2.0.0)：从现在起，您不需要使用optionsprop将Leaflet.markercluster选项传递到<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,
};