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

解决方案是我以前的同事建议的，使用对象参数包含 'translation' 属性的渲染函数。我希望这个答案对某人有所帮助。

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

React Lingui - 翻译输入占位符

React Lingui - translate input placeholder

javascript

reactjs

translation