主页 / 问题 / 1175667
Accepted
Demon __
Asked:2020-09-08 19:05:33 +0800 CST2020-09-08 19:05:33 +0800 CST

i18n 通过 jsx 标签添加动态文本

  • 772

有一个简单的 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>

没有帮助。

reactjs

1 个回答

  1. Best Answer

    您需要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>
  );
}
    • 1

相关问题