我如何在 Next-i18next / React i18next 中插入一个 Link 组件来改变文本中的位置

Question

目前我正在使用 Next.js 和 Next-i18next for I18N，但我知道 React/i18next 实现基本相同。

我遇到的问题是我需要在一些翻译文本中插入下一个 Link 组件，但这取决于语言（英语与德语）、文本的顺序和 link 会改变。例如，我正在努力处理的文本是：'Accept data policy' vs 'Datenschutzerklärung akzeptieren'

目前我有一个快速修复方法，即在翻译 JSON 文件中为文本和 link 创建两个值，然后根据当前语言交换位置。显然，这不是一个可持续的解决方案。我曾尝试使用 'Trans' 组件，但这显示了一些意想不到的行为，即翻译仅在刷新页面后才开始，否则您会在 Trans 组件中看到文本。

示例：

 function LinkText({ href, children}) {
    return <Link to={href || ''}>{children}</Link>;
  }

  return (
      <Trans i18nKey="sentence">
         text before link
        <LinkText href="/data-policy">{t("dataPolicy")}</LinkText> 
         text after link
      </Trans>
  );

和有问题的 JSON：

{
  "sentence": "agree to our <1><0/></1>",
  "dataPolicy": "data policy"
}

这是我为在 React 中复制问题而制作的 CodeSandbox link：link

(P.S i18next 的实现目前似乎并没有有效地换掉 Codesandbox 中的语言，但我把它包括在内，因为代码是为 MWE 准备的)

在此先感谢您的帮助，这让我抓狂。

Answer 1

您缺少的部分很少，

您的 i18next 配置缺少获取语言环境文件的方法，我添加了 i18next-http-backend。
你应该使用 Trans 组件将 link 注入到句子中。您的语言环境 json 应如下所示：

{
  "sentence": "Accept <0>data policy</0>"
}

// TranslatedLink.js

import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom';

function LinkText({ href, children }) {
  return <Link to={href || ''}>{children}</Link>;
}

export default function TranslatedLink() {
  const { t } = useTranslation(['common']);

  return (
    <div style={{ padding: 50 }}>
      <Trans i18nKey="sentence" t={t} components={[<LinkText href="/data-policy" />]} />
    </div>
  );
}

一个工作示例：https://codesandbox.io/s/react-i18n-interpolation-issue-forked-ck8l4

我如何在 Next-i18next / React i18next 中插入一个 Link 组件来改变文本中的位置

how do I interpolate a Link component in Next-i18next / React i18next that changes position in the text

interpolation

i18next

reactjs

next.js

react-i18next