i18n 使用键作为对象键而不是字符串

问题描述

我有一个保存所有键的翻译常量，这样我就可以通过键入键来访问翻译，从而避免错误。

但是，每当我使用从该翻译文件导入的翻译时，我都会遇到问题。

i18next::translator: missingKey en-US translations Phone Phone

我的 i18n 文件看起来像：

import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import moment from 'moment'

import {TRANSLATION} from './translations'

i18n.use(LanguageDetector).init({
  // we init with resources
  resources: {
    en: {
      translations: TRANSLATION.EN,},fallbackLng: 'en-US',debug: process.env.NODE_ENV === 'development',// have a common namespace used around the full app
  ns: ['translations'],defaultNS: 'translations',keySeparator: false,// we use content as keys
  interpolation: {
    escapeValue: false,// not needed for react!!
    formatSeparator: ',',format: function(value,formatting,lng) {
      if (value instanceof Date) return moment(value).format(formatting)
      return value.toString()
    },react: {
    wait: true,})

export default i18n

包含我在表单上使用的密钥的文件

export const TRANSLATION = {

  EN:{
    phone: 'Phone',}
}

我使用密钥的组件：

import i18n,{T_KEYS} from '@/services/i18n'

const Component=()=>{
return(
   <Form.Item
            name="phone"
            label={i18n.t(T_KEYS.phone)}
            rules={rules.phone}
          >
            <Input />
          </Form.Item>

)

我相信由于某种原因，组件在翻译键被访问之前被呈现，所以键丢失并显示消​​息但我不是 100% 确定，我尝试在 { 之前添加 Object.keys(TRANSLATIONS.EN) && {1}}，但它似乎无法解决问题，我想知道是否有人有类似的问题或想法，因为在浏览文档和存储库后，我找不到任何关于正在发生的事情的答案。

提前致谢

解决方法

对于那些正在寻找答案的人来说，这个问题的问题是，当使用 T_KEYS.phone 时，我们正在发送密钥电话，这在我们的翻译文件中不存在，这导致了翻译错误.