javascript - 如何使用带有超链接的翻译 __()

Question

在 WordPress 中创建 block 时，我需要添加一个带有链接的翻译。我在 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 并使用 %1s 之类的占位符轻松做到这一点。

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

在 react 中创建 block 时，我如何做相当于 sprintf 的操作？

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.` (用于字符串模板)。