i18next<trans> 避免重新翻译嵌套组件</trans>

Question

我正在为我的项目使用 i18next 和 React。 对于大多数翻译，我使用带有普通文本的t() function。 但是，在某些情况下，我更愿意使用<Trans />组件。

我在下面准备了一些例子：

function Example() {
    const { t } = useTranslation();

    const reusableComponent = <p>{t('TranslateMeOnlyOnce')}</p>;

    return (
        <>
            {reusableComponent}
            <Trans i18nKey={'OnlyOnceWrapper'}>
                The reusable component says {reusableComponent}
            </Trans>
        </>
    )
}

希望我的翻译文件看起来像这样：

...
TranslateMeOnlyOnce: 'Translate me only once',
OnlyOnceWrapper: 'The reusable component says <1>Translate me only once</1>',
...

但是，如您所见，我需要将嵌套组件的文本翻译两次。 我真的很想只翻译第二个翻译字符串中的The reusable component says {reusableComponent}而不是所有第一个翻译字符串。

对于那些想知道我为什么要这样做的人，可以说const reusableComponent是一个带有一些 function 的创建按钮，用于创建一个位于屏幕顶部的新条目。 然而，当我的条目列表中没有条目显示时，我想显示一条消息，内容如下： '不幸的是，还没有条目。 单击 [CreateButtonIsDisplayedHere] 创建一个新条目' 。

假设我体验到用户发现翻译“新建”而不是“创建”更有用，或者相反，我只想更改按钮的翻译，而不是包含此按钮的所有其他地方。

我也已经找到了解决这个问题的方法，但是，根据我的经验，维护起来非常难看，因为我需要将内容作为字符串而不是 React 子元素传递，这几乎利用了使用<Trans />的所有优势组件和我可以使用sprintf更好地使用t() function。

function UglySolution() {
    const { t } = useTranslation();

    const reusableComponent = <p>{t('Translate me only Once')}</p>;

    return (
        <>
            {reusableComponent}
            <Trans 
                i18nKey={'OnlyOnceWrapper'} 
                components={[reusableComponent]} 
                variables={{ v: t('Translate me only Once') }} 
                defaults='The reusable component says <1>{{v}}</1>'
            />
        </>
    )
}

这会期望我的翻译文件看起来像这样：

...
TranslateMeOnlyOnce: 'Translate me only once',
OnlyOnceWrapper: 'The reusable component says <1>{{v}}</1>',
...

所以我的问题是：我能否使我的翻译文件看起来像我创建的第二个示例，而不使用第二个示例中丑陋的<Trans />组件，更像我创建的第一个示例中的组件？

Answer 1

重新翻译

有一种方法可以像第一个示例一样使用<Trans />组件并重用以前的翻译。 在翻译字符串中使用$t(KeyToAnotherTranslation) 。

这并没有完全解决问题，因为它也不太容易维护，但会比所示的第二个示例漂亮得多。

function Example() {
    const { t } = useTranslation();

    const reusableComponent = <p>{t('TranslateMeOnlyOnce')}</p>;

    return (
        <>
            {reusableComponent}
            <Trans i18nKey={'OnlyOnceWrapper'}>
                The reusable component says {reusableComponent}
            </Trans>
        </>
    )
}

（取自问题代码中的 1:1）

翻译文件看起来像这样：

...
TranslateMeOnlyOnce: 'Translate me only once',
OnlyOnceWrapper: 'The reusable component says <1>$t(TranslateMeOnlyOnce)</1>',
...

有关 i18next 中变量用法的更多信息。