【发布时间】：2021-12-20 06:11:21
【问题描述】：
我的网站中有一个自定义主题（浅色/深色），我也有一个自定义钩子。
我将谷歌地图（react-google-maps）自定义样式放在useMemo 中并将主题设置为依赖项，但是当我更改主题时，地图组件似乎不会重新渲染并应用新颜色。我尝试调试但没有运气。这是我的实现：
export const MapMarkerSelection = compose(
withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${API_KEY_MAP}&libraries=geometry,drawing,places`,
loadingElement: <div style={{height: `100%`}} />,
containerElement: (
<div style={{height: `400px`, margin: `8px 0 20px`, borderRadius: `0.5rem`, overflow: 'hidden'}} />
),
mapElement: <div style={{height: `100%`}} />,
}),
withScriptjs,
withGoogleMap,
)((props) => {
const mapRef = useRef();
const theme = useTheme(); //here is mu custom hook (no issue with this it work fine in other components)
useEffect(() => {
setLatMarker(props.markerPosition.latitude);
setLngMarker(props.markerPosition.longitude);
mapRef.current.panTo({
lat: props.markerPosition.latitude,
lng: props.markerPosition.longitude,
});
}, [props.markerPosition, props.markerPosition.latitude, props.markerPosition.longitude]);
const [latMarker, setLatMarker] = useState(props.markerPosition.latitude);
const [lngMarker, setLngMarker] = useState(props.markerPosition.longitude);
const setCallback = useCallback(
(latLng) => {
if (props.onSelectPosition) {
props.onSelectPosition({latitude: latLng.lat(), longitude: latLng.lng()});
setLatMarker(latLng.lat());
setLngMarker(latLng.lng());
mapRef.current.panTo({
lat: latLng.lat(),
lng: latLng.lng(),
});
}
},
[props],
);
const mapStyle = useMemo(() => {
console.log('here');
return [
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: theme.BACKGROUND_COLOR, //here I set water color to dark for dark theme and blue for lighr theme
},
{
lightness: 17,
},
],
},
{
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{
color: '#f5f5f5',
},
{
lightness: 20,
},
],
},
{
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [
{
color: '#ffffff',
},
{
lightness: 17,
},
],
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{
color: '#ffffff',
},
{
lightness: 29,
},
{
weight: 0.2,
},
],
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [
{
color: '#ffffff',
},
{
lightness: 18,
},
],
},
{
featureType: 'road.local',
elementType: 'geometry',
stylers: [
{
color: '#ffffff',
},
{
lightness: 16,
},
],
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [
{
color: '#f5f5f5',
},
{
lightness: 21,
},
],
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#dedede',
},
{
lightness: 21,
},
],
},
{
elementType: 'labels.text.stroke',
stylers: [
{
visibility: 'on',
},
{
color: '#ffffff',
},
{
lightness: 16,
},
],
},
{
elementType: 'labels.text.fill',
stylers: [
{
saturation: 36,
},
{
color: '#333333',
},
{
lightness: 40,
},
],
},
{
elementType: 'labels.icon',
stylers: [
{
visibility: 'off',
},
],
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [
{
color: '#f2f2f2',
},
{
lightness: 19,
},
],
},
{
featureType: 'administrative',
elementType: 'geometry.fill',
stylers: [
{
color: '#fefefe',
},
{
lightness: 20,
},
],
},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [
{
color: '#fefefe',
},
{
lightness: 17,
},
{
weight: 1.2,
},
],
},
];
}, [theme.BACKGROUND_COLOR]);
return (
<GoogleMap
ref={mapRef}
defaultOptions={{
styles: mapStyle,
}}
defaultZoom={12}
defaultCenter={{lat: latMarker, lng: lngMarker}}
onClick={({latLng}) => setCallback(latLng)}
>
<Marker position={{lat: latMarker, lng: lngMarker}} draggable onDragEnd={({latLng}) => setCallback(latLng)} />
</GoogleMap>
);
});
只有当我刷新页面时，地图的新主题才会适用。我该如何解决？
【问题讨论】：
标签： reactjs react-router