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>); } 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> ) }Otra forma es usar sprintf integrado 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> ) }