在这里发帖是因为这是interwebz上的第一个搜索结果，没有一个答案对我的情况有效。
我的翻译JSON看起来像这样：

"readOnlyField": "<0>{{- key}}:</0> <1>{{- value}}</1>"

我设法使它工作的唯一方法是这样使用Trans：

<Trans
  i18nKey="readOnlyField" // the key in your JSON file
  values={{ // The variables in your i18n entry from the JSON file
    key: "Storage",
    value: "2TB SSD",
  }}
  components={[<strong />, <i />]} // The component at index 0 (<strong />) will be parent of <0> ({{- key}}), and so on...
/>

它看起来像这样：

**存储：***2 TB固态硬盘 *

是啊，你做错了。

return (
  <Trans i18nKey="welcome">
    Welcome to our site, <strong>{{name}}</strong>
  </Trans>
)

您的JSON文件应该如下所示：

"welcome": "Welcome to our site, <1>{{name}}</1>"

使用<1>的原因是Trans将字符串分解为数组，因此在本例中为：["Welcome to our site, ", "<strong>{{name}}</strong>"]https://react.i18next.com/latest/trans-component#how-to-get-the-correct-translation-string

我刚刚发布了一个类似问题的答案，我可以解决，但在React Native中，应该也可以在React中工作：https://stackoverflow.com/a/70112582/9506908

// render
<Trans i18nKey="yourTranslationKey" components={{ link: <Text onPress={() => console.log('do something')}}} /> }} />

// translationFile
{...
 "yourTranslationKey": "Please <link>Click me</link>",
...}```

您需要围绕<div>使用Trans组件。如果您还想传递一些更复杂的组件，则需要将组件作为prop传递到Trans组件中，并将其索引用作中间HTML标记。然后还将转换传递到options对象中在t函数中，并在翻译字符串中使用它们。

// package.json
    ...
    "bootstrap": "^5.2.3",
    "i18next-browser-languagedetector": "^7.0.1",
    "i18next-http-backend": "^2.1.1",
    "react": "^18.2.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.1.5",
    "react-scripts": "5.0.1",
    ...

在您的组件中。

// src\App.js
<Trans
  t={t}
  components={[
    <span className="badge bg-primary"></span>,
    <span className="badge bg-success"></span>,
  ]}
>
  <p>
    {t("message", {
      somethingInsideBadge: `Some ${variable} inside the badge`,
      somethingElseInsideBadge: `Some ${variable} inside the badge`,
    })}
  </p>
</Trans>

然后在翻译文件中：

// public\locales\en-US\translation.json
{
  ...
  "message": "<strong>This is badge number 1:</strong> <0>{{somethingInsideBadge}}</0> <i>and badge number 2:</i> <1>{{somethingElseInsideBadge}}</1>"
  ...
}

结果