Tengo una página de blog en varios idiomas y uso la biblioteca react-i18next para la traducción. Tengo un componente llamado BlogPostPage donde muestro cada publicación cuando se abre, dentro del componente hay una parte para mostrar el texto del blog como este:
import { useTranslation } from "react-i18next"; const [t] = useTranslation(["translation1", "overview"]); .......... <Typography mb={2} component="p" variant="subtitle1"> {t(`text${state.id}1`)} </Typography>y mi archivo de traducción json se ve así
{ "text51":"<h4>Welcome to our application</h4>", }Entonces, quiero poner el código html dentro del texto de traducción, ya que diferentes publicaciones tienen un código html diferente, realmente necesita estar en el archivo json y no en el componente ... ¿hay alguna forma de hacerlo?
La salida de mi código es:
<h4>Welcome to our application</h4>Su problema es que reaccionar intentará escapar de cualquier html que encuentre en cadenas como esta. Si es absolutamente necesario hacer esto, puede usar el siguiente método:
<div dangerouslySetInnerHTML={{__html: t(`text${state.id}1`)}} /> Tenga en cuenta que hay una razón por la que reacciona llama a este accesorio dangerouslySetInnerHTML SetInnerHTML, y hacer esto es en gran medida un anti-patrón.
Use el componente Trans: https://react.i18next.com/latest/trans-component
<Trans i18nKey="text51"> <h4>Welcome to our application</h4> </Trans> Con <0> en lugar de <h4>
"text51": "<0>Welcome to our application</0>"