时间戳

首页 > 解决方案 > 使用 react-i18next 翻译全球日期和月份

reactjs - 使用 react-i18next 翻译全球日期和月份

问题描述

用户可以将语言从瑞典语切换到英语或英语到瑞典语。我可以翻译除星期几和月份之外的所有字符串。

这是我的 i18n.js，主要翻译实用程序所在的位置。

import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import XHR from 'i18next-xhr-backend'

// languages
import translationSv from '../locales/sv/translation.json'
import translationEn from '../locales/en/translation.json'

i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    debug: false,
    react: {
      useSuspense: false,
    },
    fallbackLng: 'sv',
    keySeparator: false,
    load: 'languageOnly',
    interpolation: {
      escapeValue: false,
    },
    resources: {
      sv: {
        translations: translationSv,
      },
      en: {
        translations: translationEn,
      },
    },
    ns: ['translations'],
    defaultNS: 'translations',
    detection: {
      order: ['querystring', 'localStorage', 'navigator'],
      lookupQuerystring: 'lang',
      lookupLocalStorage: 'i18nextLng',
    },
  })

export default i18n

在我的 dateHeader.js 中，我有以下代码：

import React from 'react'
import moment from 'moment'
import Moment from 'react-moment'


const dateHeader = () => {
<Typography variant="body2">
  <Moment format="DD MMMM" subtract={{ days: 1 }}>
     {dateOfArrival}
  </Moment>
</Typography>
}

我在 Moment 中添加了 locale = "sv" ，但日子被永久更改为瑞典语，我不希望这样。我看到 onLanguageChanged 可以用来改变语言。我是新手，所以我对如何在全球范围内翻译所有日期和月份感到困惑。

标签： reactjsmomentjstranslationreact-i18next

解决方案

您可以从以下位置获取当前语言i18next.language：

import React from 'react'
import moment from 'moment'
import Moment from 'react-moment'

import i18n from './src/i18n.js' // IMPORT YOUR CONFIGURATION

const dateHeader = () => {
<Typography variant="body2">
  <Moment format="DD MMMM" subtract={{ days: 1 }} locale="{{ i18n.language }}">
                                               // ^-- ADD DYNAMIC LOCALE
     {dateOfArrival}
  </Moment>
</Typography>
}

推荐阅读