Javascript 在状态更改时在TileLayer上更改平铺

我的问题是在这种情况下如何更改平铺地图的url：

function ChangeView({ center, zoom }) {
    const map = useMap();
    map.setView(center, zoom);
    return null;
}   

function TrackerMap({ darkMode, countries, casesType, center, zoom}) {

    const currentTheme = useContext(ThemeContext);
    const mapTheme = darkMode ? `https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png` : `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`;

    return (
        <MapWrapper currentTheme={currentTheme}>
            <MapContainer center={center} zoom={zoom}>
                <ChangeView center={center} zoom={zoom} />  
                <TileLayer 
                    url={mapTheme}
                />
            </MapContainer>
        </MapWrapper>
    )
}

函数更改视图（{中心，缩放}）{
const map=useMap（）；
map.setView（居中、缩放）；
返回null；
}   
函数跟踪映射（{darkMode，country，casesType，center，zoom}）{
const currentTheme=useContext（ThemeSecontext）；
常量映射主题=暗模式`https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z} /{x}/{y}{r}.png`:`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`；
返回(
)
}

---

我想根据

darkMode

props值切换TileLayer样式。但在该实现中，

darkMode

proprs的新值不会触发

的更改

React传单中的子组件在创建相应传单实例时将其道具用作选项，如传单文档中所述

默认情况下，这些道具应视为不可变的，只有这些道具 在本页中明确记录为可变将影响传单 元素更改时

因此，您将需要一个额外的组件，该组件将使用

map.addLayer（）

切换map basemap tilelayer，并且您不需要使用react传单的tilelayer，但您将构建自己的tilelayer。您可以进一步调整它以满足您的要求

function TileLayer({ darkMode }) {
  const map = useMap();
  var dark = L.tileLayer(
    "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
  );
  const normal = L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  );
  map.addLayer(darkMode ? dark : normal);

  return null;
}

将其作为MapContainer的子级导入

<MapContainer center={center} zoom={zoom} style={{ height: "100vh" }}>
      <ChangeView center={center} zoom={zoom} />
      <TileLayer darkMode={darkMode} />
 </MapContainer>

const [isDark, setIsDark] = useState(false);

<>
  <button onClick={() => setIsDark((prevState) => !prevState)}>
        Change basemap
  </button>
  <TrackerMap center={position} zoom={12} darkMode={isDark} />
</>