i have multi-language next js website.

i use packge i18next. i define variable in jsx like this.

{t("satisfied:title")}

it means

{t("JSONflieName:JSONvariable")}

but in json file i can't use HTML and it shows me like string

"title" : "this is my<br \/> <span class=\"test\"> test <\/span> title"

CodePudding user response：

HTML entities are escaped for security reasons by React. In order to make your translations render actual HTML you could do something like this:

<div dangerouslySetInnerHTML={{ __html: t("satisfied:title")}} />

But, I would strongly advice you to not do it like above. The actual thing you should beware of is putting HTML into your translated texts. If these translations are managed at some point by external translators, they might not be familiar with the HTML syntax. Do you trust these translators to not destroy your UI accidentally? You should not.

Instead you should use the advanced concepts for handling cases like above using this technique: https://react.i18next.com/latest/trans-component