使用 i18n 打印此文本的最佳方式是什么？

Question

基本上我要显示的是 I am Python, Javascript and Flutter developer. 字符串。但它看起来是这样的：

反应中有以下组件：

<Typography gutterBottom variant="h6">
  I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.
</Typography>

使用 HL 组件，我基本上是在对文本应用一些样式，我将如何使用 next-translate 进行翻译？我最好的尝试是：

<Typography gutterBottom variant="h6">
  {t("introduction2", {
    langs: [
      <HL>Python</HL>,
      <HL>JavaScript</HL>,
      <HL>Flutter</HL>,
    ]
  })}
</Typography>

有：

{
  ...
  "introduction2": "I am {{langs[0]}}, {{langs[1]}} and {{langs[2]}} developer.",
  ...
}

也试过：

{
  ...
  "introduction2": "I am {{langs.0}}, {{langs.1}} and {{langs.2}} developer.",
  ...
}

并且还尝试在 HL 组件上使用 renderToString，但是当我使用 Next.JS 呈现页面时，它的行为并不像您预期的那样，它弄乱了由提供的主题设置mui.

编辑

通过使用@adrai 提到的 Trans 组件解决了它，但是解决方案有点不同所以这里是最后一个形式：

import Trans from "next-translate/Trans";

...

<Typography gutterBottom variant="h6">
  <Trans i18nKey="common:introduction2" components={[<HL />]}>
    I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.
  </Trans>
</Typography>

有：

{
  ...
  "introduction2": "I am <0>Python</0>, <0>Javascript</0> and <0>Flutter</0> developer.",
  ...
}

Answer 1

使用反式组件：https://react.i18next.com/latest/trans-component

<Typography gutterBottom variant="h6">
  <Trans i18nKey="myKey">I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.</Trans>
</Typography>

并在翻译字符串中使用 <1>Python 标签…

"myKey": "I am <1>Python</1>, <3>Javascript</3> and <5>Flutter</5> developer."

使用 i18n 打印此文本的最佳方式是什么？

What is the best way to print this text with i18n?

reactjs

material-ui

next.js

internationalization

i18next