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...
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 />)} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.