Etiquetas HTML en archivos de traducción i18next en React

Estoy usando i18siguiente en un proyecto y no puedo evitar incluir etiquetas html en los archivos de traducción y hacer que se representen correctamente.

un ejemplo de mi .json archivo de traducción:

"en": {
  "product": {
    "header": "Welcome, <strong>User!</strong>"
  }
}

Hay una excelente respuesta a esta pregunta, pero relacionada con JQuery. No estoy usando JQuery, mi proyecto es React y aquí está la configuración que tengo:

import i18next from 'i18next';
import en from 'locales/en';

i18next.
  init({
    lng: 'en',
    fallbackLng: false,
    resources: en,
    debug: false,

    interpolation: {
      escapeValue: false
    }
  });

export default i18next.t.bind(i18next);

En componente tengo:

import t from 'i18n';

t('product.header')

HTML que quiero:

Welcome, <strong>User!</strong>

Html que estoy recibiendo:

Welcome, <strong>User!</strong&gt

Gracias

No ponga las etiquetas HTML en la traducción. Es una mala idea de todos modos. Separación de intereses los chicos se quejan mucho al respecto.

Utilizar el <Trans> componente si reaccionar-i18siguiente https://react.i18next.com/latest/trans-component

Hazlo así:

// Component.js

<Trans>Welcome, <strong>User!</strong>, here's your <strong>broom</strong></Trans>

Y el archivo de traducción correspondiente:

// your locales/starwars_en.js file

translations: {
  "Welcome, <1>User!</1>, here's your <3>broom</3>": "Welcome, <1>young padawan!</1>, here's your <3>light saber</3>",
}

Estos números y te parecerá aleatorio pero espéralo:

Trans.children = [
  'Welcome, ',                        // index 0
  '<strong>User!</strong>'            // index 1
  ', please don't be ',               // index 2
  '<strong>weak</strong>',            // index 3
  ' unread messages. ',               // index 4
]

NOTA AL MARGEN (Puede considerarse un truco, pero ahorra toneladas de tiempo): Los chicos de react.i18next.com no tienen esto en sus documentos, pero puedes usar el lenguaje base como llave (Inglés en este caso). Le ahorra tiempo, no traducir dos veces como lo mostraron en sus documentos y cito:

// Component file

import React from 'react';
import { Trans } from 'react-i18next'

function MyComponent({ person, messages }) {
  const { name } = person;
  const count = messages.length;

  return (
    <Trans i18nKey="userMessagesUnread" count={count}>
      Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
    </Trans>
  );
}

// translation file

"userMessagesUnread": "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
"userMessagesUnread_plural": "Hello <1>{{name}}</1>, you have {{count}} unread messages.  <5>Go to messages</5>.",

De todos modos “¡Felicitaciones!” al equipo i18next! ¡Sois geniales, chicos!

Aquí – volverse loco!

Desde react-i18next@11.6.0puede usar etiquetas dentro de su cadena de traducción y reemplazarla con components apoyar en Trans componente o t propiedad de useTranslation gancho:

https://react.i18next.com/latest/trans-component#using-with-react-components

Ejemplo de uso:

<Trans
  i18nKey="myKey" // optional -> fallbacks to defaults if not provided
  defaults="hello <italic>beautiful</italic> <bold>{{what}}</bold>" // optional defaultValue
  values={{ what: 'world'}}
  components={{ italic: <i />, bold: <strong /> }}
/>

no es un problema de react-i18next: simplemente no puede agregar html en un elemento de reacción. react lo protegerá de la vulnerabilidad xss y escapará del contenido:

más detalle y posible solución: https://facebook.github.io/react/tips/peligrosamente-set-inner-html.html

pero tenga en cuenta que si coloca contenido de usuario allí, no escapará, abrirá su sitio a ataques xss.

más seguro leyendo el readme de react-i18next:
https://github.com/i18next/react-i18next#interpolar-componente

lo que te hace dividir el contenido

entonces, la “mejor” solución, al menos lo que hacemos, es usar Markdown en las traducciones y usar, por ejemplo: https://github.com/acdlite/react-notable para convertir eso en contenido formateado.

Podrías probar y usar la propiedad peligrosamenteSetInnerHTML. Esto le permite usar HTML en su JSON que se representará en la etiqueta.

Tenga en cuenta que no puede tener ambos, esta propiedad y niños

Ejemplo de uso

<p dangerouslySetInnerHTML={{__html: t(`users_desc`) }} />

en el json puedes escribir algo como esto

{
...
"users_desc": "Users  are <b> Amazing </b>"
...
}

Esto generará una etiqueta

con una etiqueta como niño.

Primero necesitas escribir tu archivo json así:

"en":{
   "Welcome":"Welcome",
   "User":"User"
}

Luego escribe tu código HTML de la siguiente manera:

<header>{t('Welcome')},<strong>{t('User')}!<strong>
<header>