Hi all, we have a problem doing i18n with React. This is about template strings.
What we need:
<p>
By clicking SignUp, you accept our <a href="/terms">Terms of Service</a>
</p>
How I would do it (not in React):
i18n.t('By clicking SignUp, you accept our {{terms}}', {
terms: `<a href="/terms">${i18n.t('Terms of Service')}</a>`
})
Since React does not operate with strings/templates - this is not really possible to achieve.
Possible hacky, but not acceptable solution is
<p>
{i18n.t('By clicking SignUp, you accept our')}
<a href="/terms">{i18n.t('Terms of Service')}</a>
</p>
It is not acceptable in a long term since in other languages phrases are often arranged differently, so when you do translation you need to move <a>
around the sentence to not sound silly.
Definitely prefer your updated solution... The previous solution just felt too fuzzy. If people happened to translate the standalone translation of the string you are splitting on differently to the inline version then it all breaks down.