reactjs - How to add formatting to react-i18next?

Question

This seems insane, but I wasn't really able to find a good solution on this:

Assume you have the following translation file:

en.json

{
  stuff: "<p> random text <b>more random text</b>. more random text {{_distance}}) even more random text <b>and more</b> random text</p>"
}

Now I can call this like so:

<div dangerouslySetInnerHTML={{ __html: t('stuff', { _distance }) }} />

This is pretty dangerous, especially in a case where I want to have external employees work on my translation files. The documentation talks of some seemingly-random replacement gags:

translations: {
  stuff: "<1> random text <3>more random text</3>. more random text {{_distance}}) even more random text <7>and more</7> random text</1>"
}

I guessed the replacements tags for the example. But even if they were correct. Again some external translator would not be able to provide formatted text in his language.

What is the best way to go about this?

question from:https://stackoverflow.com/questions/65873138/how-to-add-formatting-to-react-i18next

Answer 1

Waitting for answers