动态导入多个文件并使用"反应本地化"传递给本地化字符串

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时，它LocalizedStrings({en})工作正常。但我不想遵循这种方法。我需要在运行时获取 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;

这应该动态加载所有区域设置 json 文件。