Tengo una aplicación reactjs multilingüe, necesito importar condicionalmente el idioma usado (declarado en el html y usado como accesorios, por ejemplo, si declaro data-locale="nl" necesito importar las cadenas holandesas) probé la condición if ¡pero no funciona porque no puede hacerlo para importar archivos/paquetes!
import TimeAgo from 'react-timeago'; if (locale === 'en') { import englishStrings from 'react-timeago/lib/language-strings/en'; } else if (locale === 'nl') { import dutchStrings from 'react-timeago/lib/language-strings/nl'; } else { import frenchStrings from 'react-timeago/lib/language-strings/fr'; } import buildFormatter from 'react-timeago/lib/formatters/buildFormatter';El idioma declarado debe estar en buildFormatter para que pueda usarlo en mi JSX, tengo esta condición de cambio para elegir las cadenas correctas
const locale = root_el.getAttribute("data-locale"); let langStrings; switch(locale) { case 'en': { langStrings = englishStrings; break; } case 'nl': { langStrings = dutchStrings; break; } default: langStrings = frenchStrings; } const formatter = buildFormatter(langStrings);¿Alguna sugerencia/sugerencia sobre cómo hacer esto correctamente? ¿Necesito la condición del interruptor?
Puede usar la carga diferida para importar componentes/módulos condicionalmente, la carga diferida también es un buen paso para mejorar el rendimiento. Pero para usarlo, tendría que asignarlo a una variable/constante para que sea reconocible fuera del alcance de su bloque.
Podrías intentar hacer algo como esto:
import TimeAgo from 'react-timeago'; import React from 'react'; let langString; if (locale === 'en') { langString = React.lazy(()=>import('react-timeago/lib/language-strings/en')); } else if (locale === 'nl') { langString = React.lazy(()=> import('react-timeago/lib/language-strings/nl')); } else { langString = React.lazy(()=>import('react-timeago/lib/language-strings/fr')); } Dependiendo de la condición, se carga un módulo apropiado en la variable langString .