如何在超链接中使用翻译__()

Question

在WordPress中创建一个块时，我需要在里面添加一个链接的翻译。我在JS中这样做，但它没有提供预期的结果:

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
)
}
});

在PHP中，我可以很容易地使用sprintf和占位符，如%1。

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

在react中创建块时，我如何做等效的sprint ?

Answer 1

您正在尝试使用React在翻译的句子中插入html标记。您需要保留一个占位符(如{0})，然后您需要将其替换为实际的组件。

当使用PHP时，你只是简单地用其他文本替换文本(这是你的HTML)，在react中，你使用组件，所以你不能简单地替换它们

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>);
}

边注

'The cold never {d} anyway.'是一个普通字符串，也许你想要`The cold never ${d} anyway.`(用于字符串模板)。

Answer 2

尝试使用模板字符串(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>
)
}

相似的问题

Answer 3

另一种方法是使用sprintf内置@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>
)
}