React Lingui - 翻译输入占位符

Question

I have a problem with translation placeholder prop for input. I have a wrapper component <Text /> which renders <input> one. I've tried to translate placholder this way:

 import { Trans, t } from '@lingui/macro' const passwordPlaceholder = t('password.placeholder')`Enter password` // this doesn't works <Text as='input' type='password' name='password' placeholder={t(passwordPlaceholder)} required /> // neither <Text as='input' type='password' name='password' placeholder={<Trans id={passwordPlaceholder} />} /> // not <Text as='input' type='password' name='password' placeholder={passwordPlaceholder} />

I tried a lot of time to solve this problem, no solution found...

Answer 1

The solution was suggested by my former colleague, using render function with object parameter contains 'translation' property. I hope this answer helps someone.

 <Trans id={passwordPlaceholder} render={({translation}) => ( <Text as='input' type='password' name='password' placeholder={translation} required />)} />