Tengo un problema con I18next. No puedo entender cómo hacer que funcionen los enlaces a los sitios web, aquí está mi código:
import React, { Suspense } from "react"; import i18n from "i18next"; import { initReactI18next, useTranslation, Trans } from "react-i18next"; const translationSwe = { about: "Information", example: "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer noopener' href='https://youtube.com'>länk</a>" } const translationEng = { about: "About" example: "Example <br> <strong>text</strong>, here is <a target='_blank' rel='noreferrer noopener' href='https://youtube.com'>link</a>" } i18n.use(initReactI18next).init({ resources: { swe: { translation: translationSwe }, eng: { translation: translationEng }, }, lng: "swe", fallbackLng: "swe", interpolation: { escapeValue: false }, }); const App = () => { const { t } = useTranslation(); return( <Suspense fallback="Loading.."> <div className="app"> <p><Trans i18nkey="example"/></p> </div> </Suspense> ); };Los saltos de línea y las etiquetas fuertes funcionan bien, pero el enlace no. En lugar del enlace, imprime solo
<a>länk</a>He leído algunos artículos sobre cómo hacer que los enlaces funcionen, pero en cada uno de ellos los datos están en archivos JSON separados. Y en cada uno de ellos también debe insertar el enlace desde donde está llamando al componente Trans. Me gustaría simplemente agregar texto (que incluye enlaces, etc.) a translationSwe y translationEng sin tener que editar el componente Trans más adelante, en caso de que decida actualizar o agregar enlaces. ¿Cómo puedo conseguir esto?
Puede usar peligrosamente SetInnerHTML para su contenedor de traducción (p).
Esta variante funciona si usa la función "t"
Espero que mi solución te ayude.
Puede usar ReactHtmlParser para este problema.
Analiza la cadena como etiqueta HTML. Rebanadas y lo convierte en cualquier etiqueta.
import ReactHtmlParser from 'react-html-parser'; //Initialize const string_html = "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer noopener' href='https://youtube.com'>länk</a>" //When render <> {ReactHtmlParser(string_html)} </>Utilice el paquete Linkify
https://www.npmjs.com/package/react-linkify
Instalación:
yarn add react-linkifyo
npm install react-linkify --saveUso:
import Linkify from 'react-linkify'; React.render( <Linkify>Examples are available at tasti.github.io/react-linkify/.</Linkify>, document.body );