React-i18n Trans Component с переводами, которые содержат HTML тегов не работает - PullRequest
Новая
       15

React-i18n Trans Component с переводами, которые содержат HTML тегов не работает

0 голосов
/ 17 апреля 2020

Я пытаюсь использовать react-i18nnext с переводом json, который содержит некоторые теги HTML, например: 

// en.json
{ "welcome": "Welcome to our site, <strong>{{name}}</strong>" }

В моем компоненте React я хотите, чтобы строка отображалась следующим образом.

Добро пожаловать на наш сайт, Джон

Использование функции useTranslation обычно печатает строку буквально не интерпретируя его как HTML, как Welcome to our site, <strong>John</strong>. 

import React from 'react'
import { useTranslation } from 'react-i18next'

const App = () => {
  const { t } = useTranslation()

  return(
    <div>{t('welcome', { name: 'John' })}</div>
  )
}

Я заменил его на dangerouslySetInnerHTML, и он был правильно отображен. 

<div dangerouslySetInnerHTML={{ __html: t('welcome', { name: 'John' }) }}></div>

Однако я хочу избежать используя dangerouslySetInnerHTML, если это возможно. Я прочитал в документации, что вы можете использовать нечто, называемое Trans-компоненты, для переводов с тегами HTML.

Документы: Использование для <br /> и других простых элементов html в переводах (v10.4.0 )

Но я не совсем понимаю, как их использовать, так как примеры, которые они показывают, похоже, заменяют теги-заполнители, такие как <1>, на настоящие теги, такие как <br />. Есть ли способ использовать компоненты Trans (или другой метод, который не использует dangerouslySetInnerHTML), чтобы получить переведенные строки, которые будут интерпретироваться как HTML?

Заранее спасибо.

1 Ответ

1 голос
/ 17 апреля 2020

Да, вы делаете это неправильно. 

return (
  <Trans i18nKey="welcome">
    Welcome to our site, <strong>{{name}}</strong>
  </Trans>
)

И ваш файл JSON должен выглядеть следующим образом: 

"welcome": "Welcome to our site, <1>{{name}}</1>"

Причина, по которой вы используете <1>, заключается в том, что Trans разбивает вашу строку на массив, поэтому в данном случае это: ["Welcome to our site, ", "<strong>{{name}}</strong>"] https://react.i18next.com/latest/trans-component#how -to-get-the-правильная-строка перевода

...