react-i18next: Trans cannot interpolate Components without text
I would like to interpolate an input
tag into a localized text. I do not care about localizing the value
field (though I could do that with the translate HOC and t
), but the Trans
component just removes it from the rendered output.
<Trans i18nKey="share">
<input value="copyme" readOnly />
</Trans>
share: 'Interpolated <0></0> component',
Also, when using a tag like a
and either:
- putting no text contents in
children
(<a href...></a>
) but in the translation (<1>asd</1>
) - putting text in
children
(<a href...>asd</a>
) but none in the translation (<1></1>
)
the component crashes:
Uncaught TypeError: Cannot read property 'split' of undefined
at getChildren (eval at <anonymous> (main.js:3801), <anonymous>:64:23)
at eval (eval at <anonymous> (main.js:3801), <anonymous>:84:23)
at Array.reduce (<anonymous>)
at getChildren (eval at <anonymous> (main.js:3801), <anonymous>:69:21)
at renderNodes (eval at <anonymous> (main.js:3801), <anonymous>:100:10)
at Trans.render (eval at <anonymous> (main.js:3801), <anonymous>:141:68)
at eval (eval at <anonymous> (main.js:3312), <anonymous>:796:21)
at measureLifeCyclePerf (eval at <anonymous> (main.js:3312), <anonymous>:75:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (main.js:3312), <anonymous>:795:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (main.js:3312), <anonymous>:822:32)
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 23 (13 by maintainers)
Ok. Now I understand why it works the way it does.