使用 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 组件，我基本上将一些样式应用于文本，我将如何将其翻译为下一个翻译？我最好的尝试是：

<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

使用 Trans 组件：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."