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"
}

个人建议，对于换行，请在翻译中使用 \n 并结合 css。

例如，您可以查看以下答案：React i18n break lines in JSON String