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

该解决方案是由我的前同事建议的，使用带有对象参数的渲染函数包含“翻译”属性。我希望这个答案对某人有所帮助。&nbsp; &nbsp; <Trans id={passwordPlaceholder} render={({translation}) => (&nbsp; &nbsp; &nbsp;<Text as='input' type='password' name='password' placeholder={translation} required />)}&nbsp;/>