i18next 翻译中间的粗体文本

Question

我有一个名为 Translations.json 的静态文件，其中包含我的翻译：

{
  "common": {
    "greeting": "We will see you at NEW YORK in the morning!"
  }
}

在我的反应代码中，我一直在做一些事情：

<p>{translate('common.greeting')}</p>

但是，我希望“NEW YORK”这个词是粗体的。我一直在做一些研究，我发现该Trans组件可能就是我正在寻找的，但我没有运气。我打算将翻译分为 3 部分... greetingIntro、、grettingBold和grettingEnd...

有人能指出我正确的方向吗？

Answer 1

@adrai和@xec已经回答了这个问题，但我认为它仍然太复杂了。

所以这个答案的简单版本是......在您的代码中使用它：

import { Trans } from 'react-i18next'

<Trans i18nKey="common.greeting" />

在你的 JSON 中：

{
  "common": {
    "greeting": "We will see you at <strong>NEW YORK</strong> in the morning!"
  }
}

完整文档可在https://react.i18next.com/latest/trans-component获取

我的版本是：

"i18next": "^20.6.0",
"react-i18next": "^11.11.4",

Answer 2

感谢 @adrai 在评论中指出答案，我想我会在这里为未来的访问者输入它；

阅读完整文档：https://react.i18next.com/latest/trans-component

您可以使用<Trans>来自的组件react-i18next

import { Trans } from 'react-i18next'

我假设“纽约”文本应该是动态的（易于替换），如果不是，则不需要该values部分。

<Trans i18nkey='common.greeting' values={{ city: 'NEW YORK' }}>
  We will see you at <strong>NEW YORK</strong> in the morning!
</Trans>

然后，在区域设置 JSON 文件中，您可以用作<N>标记内使用的索引号 N 处的 JSX 标记<Trans>以及{{key}}任何动态值（如本例中的城市）的占位符

{
  "common": {
    "greeting": "We will see you at <1>{{city}}</1> in the morning!"
  }
}

为什么<1>？该字符串被分割成索引部分，从 开始0。在这种情况下，第一部分 (index 0) 将是文本"We will see you at "，第二部分 (index 1) 将是<strong>元素。

如果未找到翻译，组件内的文本<Trans>仅用作后备，但<strong>标记将替换<1>占位符。

更新：根据文档，从版本 10.4.0 开始，您还可以直接在文本中使用一些标签：['br', 'strong', 'i', 'p'] 但从不嵌套，也没有属性。另请参阅 Aleksandar Sadzak 的回答。

Answer 3

从v11.6 开始，它们有一种列出组件的替代样式- 这意味着您可以使用名称而不是数字作为包装标签。

他们的例子：

<Trans
  i18nKey="myKey" // optional -> fallbacks to defaults if not provided
  defaults="hello <italic>beautiful</italic> <bold>{{what}}</bold>" // optional defaultValue
  values={{ what: 'world'}}
  components={{ italic: <i />, bold: <strong /> }}
/>

当应用于您的问题时，结果会类似于：

<Trans 
  i18nKey='common.greeting' 
  defaults="We will see you at <bold>{{city}}</bold> in the morning!"
  values={{ city: 'NEW YORK' }}>
  components={{ bold: <strong /> }}  
/>

Answer 4

next-18next对于2023 年解决这个问题的任何人。我正在使用：

\n

  "i18next": "^22.4.9",\n  "next": "13.1.6",\n  "next-i18next": "^13.1.5",\n  "react": "18.2.0",\n  "react-dom": "18.2.0",\n  "react-i18next": "^12.1.5"\n

\n

翻译文件

\n

public/locales/<locale>/common.json

\n

{\n  "replacedValue": "some replaced value", \n  "anotherReplacedValue": "another replaced value", \n  "sentence": "Sentence with <strong>{{replacedValue}}</strong>, and <i>{{anotherReplacedValue}}</i>."\n\n}\n

\n

页面文件

\n

pages/index.js

\n

import { serverSideTranslations } from "next-i18next/serverSideTranslations";\nimport { useTranslation, Trans  } from "next-i18next";\n\nexport default function Home() {\n  const { t } = useTranslation("common");\n\n  return (\n    <p>\n      <Trans>\n        {t("sentence", {\n          replacedValue: t('replacedValue'),\n          anotherReplacedValue: t('anotherReplacedValue'),\n        })}\n      </Trans>\n    </p>\n  );\n}\n\nexport async function getServerSideProps({ locale }) {\n  return {\n    props: {\n      ...(await serverSideTranslations(locale, ["common"])),\n    },\n  };\n}\n\n

\n

结果

\n

具有一些替换值和另一个替换值的句子。

\n

注意\xe2\x9a\xa0\xef\xb8\x8f

\n

请务必从而不是导入Trans，next-i18next否则react-i18next您会收到水合错误，因为翻译发生在客户端而不是服务器端。

\n

Answer 5

分割句子会违背翻译的目的，如果另一种语言需要以不同的顺序分割部分怎么办？

另外，我不喜欢 Trans 组件，因为您需要在默认 JSON 和 React 代码中维护翻译。

我建议使用嵌入式 HTML，但如果您在翻译中有用户输入，请小心，因为应该手动转义它。

在您的情况下，由于您没有任何用户输入，因此只需执行以下操作：

JSON：

{
  "common": {
    "greeting": "We will see you at <b>NEW YORK</b> in the morning!"
  }
}

反应：

<div dangerouslySetInnerHTML={{__html: translate("common.greeting")}} />