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.

Traducción i18n hacer una variable en negrita.

Intento crear una variable en medio de la cadena de traducción en , pero no encuentro una solución.
Necesito todas mis traducciones en 2 idiomas diferentes: ‘en’ y ‘de’

Mi código se ve así:

“`import { useTranslation } from ‘react-i18next’

const { t } = useTranslation('payment');

const companyName = 'Probando';

<typography>{t('setup with company name', <b>{companyName: companyName}</b>)}</typography>

<pre><code><br />Mi archivo de traducción:

payment en.json
</code></pre>

{
"setup with company name": "Please contact {{ companyName }} to re-edit or re-send this invitation."
}

<pre><code><br />payment de.json
</code></pre>

{
"setup with company name": "Bitte wenden Sie sich an {{ companyName }} um diese Einladung nochmal zu bearbeiten oder neu zu erhalten."
}
“`

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para incluir una variable en medio de una cadena de traducción, puedes utilizar la sintaxis de doble llave en el archivo de traducción, como se muestra en el ejemplo:

    {
      "setup with company name": "Por favor, ponte en contacto con <b>{{companyName}}</b> para volver a editar o reenviar esta invitación."
    }
    

    Luego, en tu código, puedes pasar la variable como un objeto en el segundo argumento de la función t, de esta manera:

    import { useTranslation } from 'react-i18next'
    
    const { t } = useTranslation('payment')
    
    const companyName = 'Probando'
    
    <typography>{ t('setup with company name', { companyName: <b>{companyName}</b> }) }</typography>
    

    Ten en cuenta que en este caso, la variable companyName se pasa como un elemento JSX para preservar la marca, en lugar de simplemente una cadena.

    Además, asegúrate de tener las traducciones para ambos idiomas en archivos JSON separados y haber configurado la configuración de i18n para usar ambos, como se explica en la documentación de react-i18next.

Comments are closed.