Блог

Главная - Вопросы по программированию - React Lingui — перевести заполнитель ввода

React Lingui — перевести заполнитель ввода

#javascript #reactjs #translation

#javascript #reactjs ( реакция ) #перевод

Вопрос:

У меня проблема с переводом placeholder prop для ввода. У меня есть компонент-оболочка, <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} />

Я много раз пытался решить эту проблему, но никакого решения не нашел…

Ответ №1:

Решение было предложено моим бывшим коллегой, используя функцию рендеринга с параметром объекта, содержащим свойство ‘translation’. Я надеюсь, что этот ответ кому-то поможет.

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