React Lingui - 翻译输入占位符答案

【问题标题】：React Lingui - translate input placeholderReact Lingui - 翻译输入占位符
【发布时间】：2020-09-08 08:19:18
【问题描述】：

我在翻译placeholder 输入时遇到问题。我有一个包装器组件<Text />，它呈现<input> 一个。我试过这样翻译占位符：

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

我尝试了很多时间来解决这个问题，但没有找到解决方案......

【问题讨论】：

标签： javascript reactjs translation

【解决方案1】：

解决方案是我以前的同事提出的，使用带有对象参数的渲染函数包含“翻译”属性。我希望这个答案对某人有所帮助。

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

【讨论】：