i18n добавление динамического текста через jsx тег

Question

Есть простой jsx код.

<Typography>
   {`${t('txt.title',  { phone } )}`}
</Typography>

И его перевод в соответственном json файле.

"txt": {
      "title": "На номер {{ phone }} был отправлен код верификации.",
 }

Текст выводиться все норм. Но как мне добиться результата чтобы выводимый текст был обернут в какой-то тег. К примеру тег <b></b>

Попробовал написать так:

import { Trans } from 'react-i18next';

<Trans t={t('txt.title')}><b>{phone}</b></Trans>

Не помогло.

Answer 1

Вам нужно использовать Trans компонент следующим образом

import React from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation, Trans } from "react-i18next";
import "./styles.css";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next",
      title: "На номер <1>{{phone}}</1> был отправлен код верификации."
    }
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en",

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default function App() {
  const { t } = useTranslation();
  const phone = "732434249";

  return (
    <div className="App">
      <h1>{t("Welcome to React")}</h1>
      <Trans i18nKey="title" phone={phone}>
        На номер <b>{{ phone }}</b> был отправлен код верификации.
      </Trans>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Интерактивный пример также доступен на codesandbox
Подробнее можно почитать в документации react-i18next по ссылке

БЛОГ НА HUSL

i18n добавление динамического текста через jsx тег

Ответы (1 шт):