i18next 反应 - HTML 标签

Question

我在做react项目的翻译，所以用的是i18next。

到目前为止我没有遇到任何问题，按照文档一切正常，只是我遇到了一个更难的主题，我想要 html 代码（非常简单）我的翻译，用于排版。

只是，
标签显示为文本，在html 中没有考虑，这是我不明白的，如果我仔细阅读文档，他们应该是。 ..

你有解决办法吗？

这是我的 i18n.js 配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

import translation from "./translation.json"
// not like to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

const resources = translation

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    react:{
      bindI18n: 'languageChanged',
      transSupportBasicHtmlNodes: true,
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
      useSuspense: false //   <---- this will do the magic
    }
  });


export default i18n;

翻译（测试！）：

"home_text":"hello <br/> world"

这里我叫翻译：

<p style={{color:'#A1A1A1', fontWeight:'400'}}>
    {t('home_text')}
</p>

我可能配置错了，但我没看到哪里...

Answer 1

为了从翻译中呈现 html 元素，您需要使用 Trans component，它允许您混合和匹配 html 元素和 React 组件。

// usage 
<Trans i18nKey="home_text" components={[<br />]} />

// translation.json
{
  "home_text": "hello <1/> world"
}

开始 i18next-react v11.6.0 有另一种声明组件的方法。

// usage 
<Trans i18nKey="home_text" components={{newLine: <br />}} />

// translation.json
{
  "home_text": "hello <newLine/> world"
}

个人建议，对于换行符，请在翻译中使用 \n 与 css.

的组合

例如，您可以查看此答案：

i18next 反应 - HTML 标签

i18next react - HTML tags

reactjs

i18next