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 extraer useTranslate como una función auxiliar pero no como un componente?

27 Jul, 2023 Programación

Estoy usando Next.js ahora e intento hacer la traducción de estos textos con ‘next-translate/useTranslation’.

Como es posible que no tenga todas las cadenas traducidas en la aplicación, he escrito una función de verificación para comprobar si la cadena se encuentra en mi archivo JSON de traducción (common). Si la cadena se encuentra, devuelve la cadena traducida, de lo contrario muestra la cadena original.

El objetivo es que la función de verificación de traducción se extraiga como una función de utilidad que se pueda reutilizar en cada página.

Uso actual: Copiar la función en cada componente que necesite traducción (código repetido en cada componente).

type Props = {}

const testComponent: FunctionComponent<props> = () => {
  const { t, lang } = useTranslation('common');

  // la función de verificación utilizada
  const checkStringTranslated = (string2bChecked: string) => {
    if (t(string2bChecked).includes('common')) return false;
    return true;
  }

  return (
    <div>
      <p>{checkStringTranslated("String2bTranslated") ? t("String2bTranslated") : "String2bTranslated"}</p>
    </div>
  )
}

He encontrado una publicación que logra eso, pero no en Next.js: https://stackoverflow.com/questions/59394820/react-i18next-usetranslation-hook-in-helper-method

Y no tengo idea de cómo hacerlo en Next.js. ¿Cómo puedo hacer esto menos redundante?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la función de verificación de traducción sea reutilizable y menos redundante en Next.js, puedes crear un archivo de ayuda separado y exportar la función desde allí. Aquí tienes un ejemplo de implementación:

    1. Crea un archivo llamado translationHelper.ts.

    2. En translationHelper.ts, define la función checkStringTranslated de la misma manera que en el uso actual:

      import { useTranslation } from 'next-translate';

export const checkStringTranslated = (string2bChecked: string) => {
 const { t } = useTranslation('common');

 if (t(string2bChecked).includes('common')) {
   return false;
 }
 return true;
};

      Dado que el gancho useTranslation solo se puede usar dentro de componentes funcionales en Next.js, lo importamos aquí para usarlo dentro de la función checkStringTranslated.

    3. En cualquier componente donde necesites usar checkStringTranslated, importa la función desde translationHelper.ts:

      import { checkStringTranslated } from '../ruta/a/translationHelper';

    4. Usa la función importada en tu componente de la siguiente manera: 
      const isTranslated = checkStringTranslated('String2bTranslated');

<p>{isTranslated ? t('String2bTranslated') : 'String2bTranslated'}</p>;

      De esta manera, la función checkStringTranslated se puede reutilizar en cualquier componente sin repetir el código. Además, al separar la lógica de traducción en un archivo separado, el código de tu componente se mantiene más centrado y es más fácil de mantener.

Comments are closed.