React Lingui - 翻譯輸入占位符

Question

我對輸入的翻譯placeholder具有問題。 我有一個包裝組件<Text />它呈現<input>一個。 我試過這樣翻譯 placholder：

 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} />

我嘗試了很多時間來解決這個問題，沒有找到解決方案......

Answer 1

解決方案是我以前的同事建議的，使用帶有對象參數的渲染函數包含“翻譯”屬性。 我希望這個答案對某人有所幫助。

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