Cómo usar la traducción __() con hipervínculos

2 minutos de lectura

avatar de usuario
miky

Al crear un bloque en WordPress, tendré que agregar una traducción con un enlace dentro. Lo estoy haciendo de esta manera en JS, pero no proporciona los resultados esperados:

import { render } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default function Final() {

    let d = <a href="https://example.com">bothered me.</a>;

    return (

        <p>  { __( 'The cold never {d} anyway.', 'text-domain' ) } </p>

    )
}

document.addEventListener( "DOMContentLoaded", function(event) {
    const appRoot = document.getElementById( 'root' );

    if ( appRoot ) {
        render(
            <Final/>,
            appRoot
        )
    }
});

En PHP, podría hacerlo fácilmente con sprintf y usando un marcador de posición como %1s.

echo sprintf(
    __( 'The cold never %1s anyway', 'text-domain' ),
    '<a href="https://example.com">bothered me.</a>'
);

¿Cómo hago el equivalente de sprintf al crear un bloque en reaccionar?

Está intentando insertar una etiqueta html dentro de una oración traducida usando React. Deberá mantener un marcador de posición (algo así como {0}) y luego deberá reemplazarlo con el componente real.

Cuando con PHP simplemente está reemplazando texto con otro texto (que es su HTML), al reaccionar está usando componentes, por lo que no puede simplemente reemplazarlos.

export default function Final() {
    const [before, after] = __('The cold never {0} anyway.', 'text-domain').split('{0}');
    
    return (<p>
        { before }
        <a href="https://example.com">bothered me.</a>
        { after }
    </p>);
}

Nota al margen

Este 'The cold never {d} anyway.' es una cadena simple, tal vez pretendías `The cold never ${d} anyway.` (para plantillas de cadena).

Intente usar cadenas de plantilla (ES6):

export default function Final() {

    let d = <a href="https://example.com">bothered me.</a>;

    return (

        <p>  { __( `The cold never ${d} anyway.`, 'text-domain' ) } </p>

    )
}

Pregunta similar

Otra forma es usando sprintf incorporado con @wordpress/i18n

import { render } from '@wordpress/element';
import { sprintf, __ } from '@wordpress/i18n';

export default function Final() {
    let d = '<a href="https://example.com">bothered me.</a>';
    let txt = sprintf(__('The cold never %1s anyway.', 'text-domain'), d);
    return (
      <p dangerouslySetInnerHTML={{__html: txt }}></p>
    )
}

¿Ha sido útil esta solución?