使用'react-localization‘动态导入多个文件并传递给LocalizedStrings

Question

我正在使用react-localization进行本地化。并希望动态获取JSON文件。为了获取JSON文件，我使用了require.context，但它没有加载文件内容。

.ts文件：

import LocalizedStrings from 'react-localization';
var context = require.context('./../assets/i18n/', false);
var files:any={};
context.keys().forEach((filename)=>{
  if(!filename.endsWith(".json")){
     files[filename.substr(2)] = context(filename);
  }
});
const Locale = new LocalizedStrings(files);
export default Locale;

.tsx文件：

import React, { useState } from "react";
import Locale from '../../libraries/localization';
export const Login: React.FC = () => {
 return (<div className="main-container">
    <p className="section-header">{Locale.login_page.page_title}</p>
   </div>
  )
}

我可以动态地获取json内容，但是在.tsx文件中输入Property 'login_page' does not exist on type 'LocalizedStringsMethods'时出现错误。

请告诉我如何获取多个json并分配给LocalizedStrings。

注意:当我导入像import en from "./../assets/i18n/en.json这样的json文件并将其作为LocalizedStrings({en})传递给LocalizedStrings时，它工作得很好。但我不想遵循这种方法。我需要在运行时获取json文件。

Answer 1

在你的实现中有一些错误。首先，您应该使用path.basename仅提取不带扩展名的文件名，并将其用作区域设置键。其次，您希望包含.json文件，而不是排除它们，因此if (!filename.endsWith(".json"))将成为if (filename.endsWith(".json"))。

您的localization.ts的最终代码为：

import * as path from 'path';
import LocalizedStrings from 'react-localization';

let context = require.context('./../assets/i18n/', false);
let files:any = {};

context.keys().forEach((filename:string) => {
  if (filename.endsWith(".json")) {
     const locale:string = path.basename(filename, '.json');
     const fileContext:string = context(filename);
     files[locale] = fileContext;
  }
});

const Locale = new LocalizedStrings(files);
export default Locale;

这应该会动态加载所有的locale json文件。