diff --git a/react-i18next.js b/react-i18next.js index 787aa4d61..49753af41 100644 --- a/react-i18next.js +++ b/react-i18next.js @@ -476,7 +476,7 @@ const comp = react.cloneElement(components[c], { key: componentKey }); - if (typeof comp.type === 'function' || !comp.props || !comp.props.children || translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) return; + if (!comp.props || !comp.props.children || translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) return; function Componentized() { return react.createElement(react.Fragment, null, comp); } diff --git a/src/TransWithoutContext.js b/src/TransWithoutContext.js index 041abfe3a..7da27d126 100644 --- a/src/TransWithoutContext.js +++ b/src/TransWithoutContext.js @@ -365,7 +365,6 @@ export function Trans({ const componentKey = components[c].key || c; const comp = cloneElement(components[c], { key: componentKey }); if ( - typeof comp.type === 'function' || !comp.props || !comp.props.children || (translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) diff --git a/test/trans.render.spec.jsx b/test/trans.render.spec.jsx index e36518717..dfd573ee1 100644 --- a/test/trans.render.spec.jsx +++ b/test/trans.render.spec.jsx @@ -648,6 +648,70 @@ describe('trans should work with selfclosing elements in components', () => { }); }); +describe('trans should work with self closing elements with react components', () => { + function Component({ children }) { + return
{children}
; + } + it('should render component children', () => { + const { container } = render( + These children will be preserved, + }} + />, + ); + expect(container.firstChild).toMatchInlineSnapshot(` +
+ interpolated component: +
+ These children will be preserved +
+
+ `); + }); + it('should render Link component children', () => { + const { container } = render( + These children will be preserved, + }} + />, + ); + expect(container.firstChild).toMatchInlineSnapshot(` +
+ interpolated component: + + These children will be preserved + +
+ `); + }); + it('should render anchor tag children', () => { + const { container } = render( + These children will be preserved, + }} + />, + ); + expect(container.firstChild).toMatchInlineSnapshot(` +
+ interpolated component: + + These children will be preserved + +
+ `); + }); +}); + describe('trans with null child', () => { function TestComponent() { return (