Как написать перевод по умолчанию с компонентомact-i18next Trans, который является допустимым JSX при использовании интерполированных переменных? - PullRequest
Новая
       10

Как написать перевод по умолчанию с компонентомact-i18next Trans, который является допустимым JSX при использовании интерполированных переменных?

0 голосов
/ 08 января 2020

Я пытаюсь перевести жестко закодированный текст (без i18n), используя i18next и response-18next. Поскольку контент, который я пытаюсь перевести, сам содержит узлы, я использую компонент Trans.

Я также хочу автоматически регистрировать отсутствующие переводы i18n, чтобы он правильно добавлялся в Locize. (Я использую бэкэнд Locize, и он автоматически создает недостающие ключи, так что мне не нужно делать это вручную)

Сначала я покажу, как я это делаю с использованием компонента t, когда содержимое не содержит ни одного узла. 

<Heading
  header={t('heading1, `Garant N°{{number}}`, {number})}
>

Когда до i18n у меня было Garant N°${number}, у меня теперь есть Garant N°{{number}}, где number интерполируется во время выполнения. Это прекрасно работает с реакцией, и ключ i18n heading1 автоматически добавляется в Locize с Garant N°{{number}} в качестве перевода для моего языка по умолчанию.

Теперь давайте посмотрим, как я должен это делать что с содержимым, которое содержит узел и, следовательно, когда необходимо использовать Trans: 

Hello {name}, you can subscribe
<a
  href={'#'}
  onClick={this.doSomething}
>here</a>{' '}
to fetch your discount

После i18n: 

<Trans
  i18nKey={'myKey'}
  values={{
    name: 'John',
  }}
>
  Hello {{name}}, you can subscribe
  <a
    href={'#'}
    onClick={this.doSomething}
  >here</a>{' '}
  to fetch your discount
</Trans>

Использование {{name}} - это то, что внутреннее устройство i18next ожидает для выполнения интерполяции , но это недопустимый JSX, потому что реагирующий будет полагать, что name - это переменная JS, и он выдаст ошибку во время выполнения, если переменная не определена, в моей IDE также будет показано, что переменная не определена ( предупреждения). И если переменная определена, она заменит {name} на переменную, которая жестко закодирует перевод по умолчанию. Это не хорошо.

Я не знаю, как решить эту проблему, я мог бы использовать другой символ для интерполяции (вместо {}), но это потребовало бы от меня обновления всего существующего кода, что является ошибкой -простой и громоздкий + все переводы, которые зависят от переменных.

1 Ответ

2 голосов
/ 08 января 2020 
<Trans
  i18nKey={'myKey'}
>
  Hello {{name: 'John'}}, you can subscribe
  <a
    href={'#'}
    onClick={this.doSomething}
  >here</a>{' '}
  to fetch your discount
</Trans>

должно работать

...