Material ui i18 文本中的图标

Question

是否可以在 i18 翻译文本中使用 material ui 图标？

我已经安装了库并导入到父文件中，我将这一行放在我的语言 json 文件中，但它不起作用：

{ "text": "some text <ErrorOutlineIcon /> ..."}

它只呈现“一些文本...”

谢谢

Answer 1

是，使用interpolation with Trans component

import { useTranslations, Trans } from 'react-i18next';
 
...

const { t } = useTranslation();

...

<Trans t={t} i18nextKey="text">
{{ leftText: "This is on the left side" }} <YourIcon /> {{rightText: "This is on the right side"}}
</Trans>

在你的翻译中 json:

"text" : {{leftText}} <1/> {{rightText}}

我没有对此进行测试，但您可以参考上面链接的文档。