Reactjs I18下一个粗体文本在翻译的中间

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

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

在我的react代码中，我一直在做以下事情：

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

{translate（'common.greeting'）}

然而，我希望“纽约”一词用粗体字。我一直在做一些研究，我发现

Trans

组件可能就是我想要的，但我没有运气。我将把翻译分成三部分<代码>问候介绍，

grettingBold

，和

grettingEnd

---

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

如果你已经能够将翻译后的句子分为三个部分，为什么不使用HTML创建粗体文本

比如,

{
“普通”：{
“问候语”：{
“简介”：“我们将在，
“粗体”：“纽约”，
“结束”：“早上好！”
}
}
}

{translate（'common.greeting.intro'）}{translate（'common.greeting.bold'）}{translate（'common.greeting.end'））

此wel呈现如下所示：

<p>We will see you at <b>NEW YORK</b> in the morning!</p>

我们明天早上在纽约见

我们明天早上在纽约见

---

拆分句子将无法达到翻译的目的，如果另一种语言需要以不同的顺序拆分句子，该怎么办

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

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

在您的情况下，因为您没有任何用户输入，所以只需使用：

JSON:

{
“普通”：{
“问候语”：“我们明天早上在纽约见！”
}
}

反应：

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

---

感谢@adrai在评论中指出了答案，我想我会在这里把它打印出来，供未来的访问者使用

阅读完整的文档

您可以使用

react-i18next

从'react-i18next'导入{Trans}

我假设“纽约”文本应该是动态的（易于替换），如果不是，您就不需要

值

部分

我们明天早上在纽约见！

然后，在区域设置JSON文件中，您可以将

用作

标记中使用的第n个JSX标记的占位符，并将

{{key}}

用作任何动态值（如本例中的城市）

{
“普通”：{
“问候”：“我们明天早上在{{city}见！”
}
}

---

组件中的文本仅在未找到翻译的情况下用作回退，但是

标记将替换

占位符。

是的，这是我不想做的，但如果没有更好的方法，我将使用此解决方案。谢谢。是的，Trans组件正是您所寻找的：

DangerouslySetinerHTML

之所以命名，是因为有一个原因，如果您将此方法与动态值或不受信任的翻译源一起使用，它会打开您的应用程序进行xss攻击，因为它已经声明了“但是，如果在翻译中有用户输入，请小心，因为它应该手动转义。“我看到你编辑了你的答案，但我认为你可能误解了正在发生的事情。使用Trans时，仍然只有一个地方需要维护翻译，因为您不需要同时拥有回退文本和同一语言的翻译。在任何情况下，我认为推荐一个解决方案是一个可怕的想法，它是一个潜在的安全漏洞，但很容易避免。

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