react-leaflet中GeoJson切换i18n语言时Tooltip不更新求助

你推测的原因完全正确——onEachFeature确实只会在GeoJSON组件首次挂载时执行一次，切换语言时组件没有重新触发这个函数，所以Tooltip还是保留了初始化时的翻译内容。下面给你两种实用的解决方案，根据你的场景选就行：

方案一：通过key强制GeoJSON重新渲染（简单直接） #

核心思路是给GeoJSON组件添加一个依赖当前语言的key属性，当语言切换时，key值变化会触发组件卸载并重新挂载，这样onEachFeature就会重新执行，生成新的翻译后的Tooltip。

代码示例： #

import { useTranslation } from 'react-i18next';
import { GeoJSON } from 'react-leaflet';

// ... 你的其他组件逻辑

const { t, i18n } = useTranslation();

const onEachFeature = (feature: any, layer: any) => {
  // 假设你的GeoJSON feature里有国家编码（比如iso_a2），用来匹配翻译key
  const countryKey = `countries.${feature.properties.iso_a2}`;
  // 每次执行都用最新的t函数获取翻译
  const tooltipContent = t(countryKey);
  
  // 绑定Tooltip并设置鼠标事件
  layer.bindTooltip(tooltipContent);
  layer.on({
    mouseover: () => layer.openTooltip(),
    mouseout: () => layer.closeTooltip()
  });
};

// 在GeoJSX组件中添加key属性，依赖当前语言
return (
  // ... 你的地图容器
  <GeoJSON
    key={i18n.language} // 关键：语言变化时触发重新渲染
    data={geoJson}
    onEachFeature={onEachFeature}
    // 其他属性如style等
  />
);

这个方案的优点是实现简单，不需要额外的事件监听，适合地图数据量不大的场景。缺点是重新渲染GeoJSON会有轻微的性能开销，但一般小到用户感知不到。

方案二：监听语言变化，手动更新Tooltip内容（性能更优） #

如果你的GeoJSON数据量很大，不想每次切换语言都重新渲染整个图层，可以通过监听语言变化事件，直接更新已创建的Tooltip内容，避免组件重新挂载。

代码示例： #

import { useTranslation, useI18n } from 'react-i18next';
import { GeoJSON } from 'react-leaflet';
import { useRef, useEffect } from 'react';

// ... 你的其他组件逻辑

const { t } = useTranslation();
const i18n = useI18n();
// 创建ref来引用GeoJSON组件实例
const geoJsonLayerRef = useRef<any>(null);

const onEachFeature = (feature: any, layer: any) => {
  const countryKey = `countries.${feature.properties.iso_a2}`;
  layer.bindTooltip(t(countryKey));
  
  layer.on({
    mouseover: () => layer.openTooltip(),
    mouseout: () => layer.closeTooltip()
  });
};

// 监听语言变化，更新所有Tooltip
useEffect(() => {
  if (!geoJsonLayerRef.current) return;
  
  // 遍历GeoJSON的所有图层，更新Tooltip内容
  geoJsonLayerRef.current.eachLayer((layer: any) => {
    const countryKey = `countries.${layer.feature.properties.iso_a2}`;
    const newTooltipContent = t(countryKey);
    layer.setTooltipContent(newTooltipContent);
  });
}, [t, i18n.language]); // 依赖t函数和语言变量，确保语言变化时触发

return (
  // ... 你的地图容器
  <GeoJSON
    ref={geoJsonLayerRef} // 绑定ref
    data={geoJson}
    onEachFeature={onEachFeature}
    // 其他属性如style等
  />
);

这个方案的优点是性能更好，只更新Tooltip内容而不重新渲染整个图层，适合大数据量的GeoJSON场景。

注意事项 #

• 确保你的i18n翻译文件中，countries.XX（XX是国家编码）对应的翻译值存在，比如countries.FR对应"France"（英文）和"France"（法文）等。
• 如果你的Tooltip内容不是来自feature的属性，而是自定义的countries对象（比如你state里的countries），只需要把获取key的逻辑换成匹配这个对象的方式就行，核心思路不变。

内容的提问来源于stack exchange，提问作者TheTisiboth