Allow ReactNode to passed to values or InterpolationMap

Is your feature request related to a problem? Please describe. Currently, there’s no way to pass ReactNode to values or in the InterpolationMap for t. This seems like a really simple implementation for Trans, at least, looking at the code.

Describe the solution you’d like

const [t] = useTranslation();
return <div>{t('foo', {link: <a href="//tosomewhere.com">{t('to somewhere')}</a>})}</div>;

or

return (
  <Trans
    i18nKey="foo"
    values={{value: `<a href="//tosomewhere.com">to somewhere</a>`}}
  />
);

Describe alternatives you’ve considered There really aren’t any alternatives that can work for me here. The currently supported method of using components with Trans and index-based replacement is not feasible for how our company does translations. Additionally, it’s overly complicated when, for React, we can just use React.isElement and avoid creating those children in mapAST in Trans. This would be tougher for useTranslation because t is just i18next.getFixedT and thus isn’t prepared to handle React-specific stuff.

I think allowing ReactNode for Trans would be a simple and very useful alternative to the tightly proscribed way that is currently supported.

[bfricka]

I would like to take a stab at this, for sure. Additionally, I think there is some complexity within renderNodes that can potentially be streamlined without breaking any of the logic or incurring performance penalties. As far as using components vs values, I’ll have to see. For example, having translations like: "Sometime in the year <year>B.C.E</year>" is strange to me compared to "Sometime in the year {{ year }} B.C.E".

[jamuhl]

closing in favor to #833