如何在WordPress React区块开发中配合超链接使用翻译函数__()

解决方法 #

场景1：普通文本占位符替换（完全等价PHP sprintf功能） #

WordPress 官方的@wordpress/i18n包已经内置了和PHP用法完全一致的sprintf函数，直接导入使用即可：

// 先导入sprintf
import { __, sprintf } from '@wordpress/i18n';

// 用法示例
sprintf(
    __( '你好，我是%s，今年%d岁', 'text-domain' ),
    '张三',
    25
);

对应纯文本替换需求的写法如下：

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

export default function Final() {
    return (
        <p>  
            { 
                sprintf( 
                    __( 'The cold never %s anyway.', 'text-domain' ), 
                    'bothered me.' 
                ) 
            } 
        </p>
    )
}

场景2：嵌入JSX元素（比如超链接、按钮等组件） #

如果你需要在翻译内容里插入HTML标签或者React组件，不能用普通sprintf（React会转义字符串中的HTML标签，不会渲染成实际元素），这时候需要用@wordpress/element提供的createInterpolateElement函数：

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

export default function Final() {
    return (
        <p>  
            { 
                createInterpolateElement(
                    // 翻译字符串里用<自定义标签名>做占位符
                    __( 'The cold never <link>bothered me.</link> anyway.', 'text-domain' ),
                    // 第二个参数传占位符和对应组件的映射
                    {
                        link: <a href="https://example.com" />
                    }
                ) 
            } 
        </p>
    )
}

这种写法符合WordPress国际化开发规范，翻译人员可以正常翻译整句文本，不需要关心标签结构。

内容的提问来源于stack exchange，提问作者micky