Estoy usando react-i18next: "11.16.9" para traducir mi proyecto de reacción. Funciona bien para los archivos .js y .jsx. Este es el formato que estoy usando
const { t } = useTranslation(); <th>{t('constant.name')}</th>Me quedé atascado en un escenario en el que tengo algo de contenido html dentro de un archivo con la extensión .md, que luego renderizo en mi componente de reacción usando peligrosamente SetInnerHTML.
--- path: "/404" title: "404 - This page doesn't exist" --- <section class="section section--gradient pb-0"> <div class="container apis-content"> <div class="documentation-links"> This text needs to be translated </div> </div> </section> este es mi archivo 404.md. que renderizo como
<div id="main" dangerouslySetInnerHTML={{ __html: t(content.html) }} />
Dado que es un archivo .md, no pude usar ninguna importación, ninguna constante, ganchos o hoc. ¿Cómo puedo usar variables constantes como {t('constant.name')} dentro del archivo .md? ¿Algún trabajo para esto? o me estoy perdiendo algo?
FYI: no puedo convertir los archivos .md como archivos de reacción ya que hay muchos y me estoy quedando sin tiempo
Puede crear un enlace React que inyecte la traducción al procesar el contenido HTML usando su propia etiqueta:
function useHTMLTranslation() { const { t } = useTranslation(); const newT = React.useCallback( (html = "") => { let key = html; // fallback const regex = /(?<=\[TRANS\]).*(?=\[\/TRANS\])/g; // probably you need to adjust this if you want support multiple TRANS tags const capture = html.match(regex); if (capture.length > 0) { key = capture[0]; return html.replace(`[TRANS]${key}[/TRANS]`, t(key)); } return t(key); }, [t] ); return newT; }modelo:
--- path: "/404" title: "404 - This page doesn't exist" --- <section class="section section--gradient pb-0"> <div class="container apis-content"> <div class="documentation-links"> [TRANS]constant.name[/TRANS] </div> </div> </section>uso:
const { t } = useHTMLTranslation(); <div id="main" dangerouslySetInnerHTML={{ __html: t(content.html) }} />