i18next标签

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元素从翻译中呈现出来，您将需要使用反式组分，它允许您混合和匹配html元素并对组件进行反应。

// 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。

例如，您可以检查这个答案：在JSON字符串中响应i18n断线