通过reactjs i18next翻译为每种语言翻译使用多个Json文件

2admgd59  于 2023-11-20  发布在  React
关注(0)|答案(2)|浏览(213)

我在reactjs项目中有一个名为'en.json'的json文件,以便使用i18 next翻译:

"Ascending": "Ascending",
"Descending": "Descending",
"All": "All",
"job-types": {
        "remote": "remote",
        "temporary": "temporary",
        "fulltime": "fulltime",
        "parttime": "parttime"
     },  
 ...
   }

字符串
我想在另一个json文件中插入“job-types”项,然后在我当前的“en.json”文件中引用它。是否可以使用嵌套的json文件或有任何方法来解决这个问题?如果是,请如何解决?
在i18n.js文件中,我有:

const resources = {
    en: {
      translation: translationEN
    },
    fa: {
      translation: translationFA
    },
    ar: {
      translation: translationAR
    }
  };
  
  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
      }
    });

 export default i18n;


JumtionEN、JumtionFA和JumtionAR是导入的.json文件(到i18n.js),用于所需的语言,包括英语、波斯语或波斯语和阿拉伯语。

wwtsj6pe

wwtsj6pe1#

为了引用JSON文件中的键,您首先需要使用JSON.parse(),以便可以遍历对象。

const myResponse = JSON.parse(response);
const jobTypes = myResponse['job-types'] // dashed keys must be accessed through an index

字符串
如果您需要访问该文件,请链接到它:

const myResponse = await fetch('path/to/file.json');
const jsonBody = await myResponse.json();
otherObject.jobTypes = jsonBody['job-types'];


JSON不支持链接到其他文件,因为它只是文本。你可以发送文件的位置作为一个值,但这是你能得到的最远的。
希望这对你有帮助。

cgvd09ve

cgvd09ve2#

最后,为了使用不那么复杂的翻译json文件,我为每种语言使用了两个或更多的.json文件,并将它们合并,而不是按照以下方式嵌套它们:

const resources = {
    en: {
      translation: { ...translationEN, ...translationEN1}
    },
    fa: {
      translation: { ...translationFA, ...translationFA1}
    },
    ar: {
      translation: { ...translationAR, ...translationAR1}
    }
  };
  
  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
      }
    });

 export default i18n;

字符串
第一个json文件:

{
   "Ascending": "Ascending",
   "Descending": "Descending",
   "All": "All", 
   ...
 }


json文件:

{
    "job-types": {
        "remote": "remote",
        "temporary": "temporary",
        "fulltime": "fulltime",
        "parttime": "parttime"
    }
 }

相关问题