es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo aplico la traducción de texto a elementos de mapa?

02 Aug, 2023 Programación

Añadida parte del código. Los valores de este objeto deben ser traducidos, todo debe ser dinámico.

import { useTranslation } from 'react-i18next';
...
  const { t } = useTranslation()
....
        const overlayMaps = {
            "Nubes": clouds, 
            "Nubescls": cloudscls,
            "Precipitación": precipitation,
            "Precipitacióncls": precipitationcls,
            "Lluvia": rain,
            "Lluviacls": raincls,
            "nieve": snow,
            "Presión": pressure,
            "Presióncntr": pressurecntr,
            "Temperatura": temp,
            "Viento": wind
        };
...

No funciona de esa manera:

        const overlayMaps = {
            {t("Nubes")}: clouds, 
            "Nubescls": cloudscls,
            "Precipitación": precipitation,
            "Precipitacióncls": precipitationcls,
            "Lluvia": rain,
            "Lluviacls": raincls,
            "nieve": snow,
            "Presión": pressure,
            "Presióncntr": pressurecntr,
            "Temperatura": temp,
            "Viento": wind
        };
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el código sea dinámico y traducible usando react-i18next, debes envolver las claves del objeto overlayMaps con la función t() proporcionada por useTranslation(). Así:

    import { useTranslation } from 'react-i18next';
...
const { t } = useTranslation();
...
const overlayMaps = {
  [t('Clouds')]: clouds,
  [t('Cloudscls')]: cloudscls,
  [t('Precipitation')]: precipitation,
  [t('Precipitationcls')]: precipitationcls,
  [t('Rain')]: rain,
  [t('Raincls')]: raincls,
  [t('snow')]: snow,
  [t('Pressure')]: pressure,
  [t('Pressurecntr')]: pressurecntr,
  [t('Temp')]: temp,
  [t('Wind')]: wind,
};

    Al envolver las claves del objeto con t(), los valores del objeto se traducirán según el idioma actual establecido en el contexto de i18n.

Comments are closed.