如何在react-i18next的Trans组件中条件渲染文本

要实现accountsAllowed为null时隐藏对应片段的需求，同时保留Trans组件，你可以从React组件逻辑和翻译文件语法两方面调整：

1. 修改React端Trans组件代码 #

通过条件判断控制最后一段内容的传入，只有当accountsAllowed有值时，才将其作为Trans的子元素传递：

<Trans i18nKey="userManagement:description">
    <span className="accountList-number" name="invited">{{ accountsInvited }}</span>
    {' '}
    User(s) Invited,
    {' '}
    <span className="accountList-number" name="registered">{{ accountsRegistered }}</span>
    {' '}
    User(s) Registered
    {accountsAllowed != null && (
        <>
            {' '}
            ,{' '}
            <span className="accountList-number" name="allowed">{{ accountsAllowed }}</span>
            {' '}
            User(s) Allowed
        </>
    )}
</Trans>

这里给每个<span>添加了name属性，替代原来的数字索引，避免元素顺序变化导致翻译片段匹配错误。

2. 更新翻译文件语法 #

使用i18next原生支持的Handlebars风格条件语法，实现翻译内容的按需渲染：

{
    "description": "<invited>{{accountsInvited}}</invited> User(s) Invited, <registered>{{accountsRegistered}}</registered> User(s) Registered{{#if accountsAllowed}}, <allowed>{{accountsAllowed}}</allowed> User(s) Allowed{{/if}}"
}

• {{#if accountsAllowed}}...{{/if}}：只有当accountsAllowed存在非空值时，才渲染包裹的翻译片段
• <invited>/<registered>/<allowed>：对应React组件中带name属性的子元素，确保翻译内容与组件结构准确绑定

注意事项 #

确保你的i18next配置开启了HTML支持（默认已开启），如果需要自定义插值逻辑，可在初始化配置中调整：

i18n.init({
    // 其他配置项
    interpolation: {
        allowHtml: true, // 允许翻译字符串中的HTML标签生效
        format: (value, format, lng) => {
            // 如需自定义值格式化，可在此添加逻辑
        }
    }
});

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