在react组件中将Dinamic导入到JSON文件中
在react组件中将Dinamic导入到JSON文件中
提问于 2022-04-22 04:58:18
我正在尝试读取带有react组件的json文件。其思想是能够根据default_lang变量选择要读取的文件。这是文件结构和我试图读取它们的方式。
./config.json
{
"enable-lang":{
"es": "spanish",
"en": "spanish"
},
"default-lang": "en"
}./字典/spanish.json
{
"title": "Pagina en construccion",
"description": "Esta página sigue en construcción"
}./字典/english.json
{
"title": "Page under construction",
"description": "This page is still under construction"
}./Language.js
import {Component} from "react";
import config from "./config.json";
export class Language extends Component
{
static getUsedDictionary() {
let used_lang = "es";
let dictionary_path = `./dictionary/${ config["enable-lang"][used_lang] }.json`;
return import(`${dictionary_path}`);
}
static getText (id) {
let dictionary = this.getUsedDictionary();
console.log("Dictionary value in getText:" + dictionary);
console.log("Dictionary[id] value in getText:" + dictionary);
if(dictionary[id] !== undefined) {
return dictionary[id];
} else {
return dictionary['text-not-found'];
}
}
}函数getText中的字典和字典值。我可以在控制台上看到这个
Dictionary value in getText:[object Promise]
Dictionary[id] value in getText:[object Promise]回答 2
Stack Overflow用户
发布于 2022-04-22 05:15:49
为什么不使用反应-i18Next
或者加载之前的所有内容，并选择要使用的
Stack Overflow用户
发布于 2022-04-22 05:27:30
import()返回一个承诺，因此要考虑到这一点，您必须重构代码，如下所示：
import {Component} from "react";
import config from "./config.json";
export class Language extends Component
{
static getUsedDictionary() {
let used_lang = "es";
let dictionary_path = `./dictionary/${ config["enable-lang"][used_lang] }.json`;
return import(`${dictionary_path}`);
}
async static getText (id) {
let dictionary = await this.getUsedDictionary();
console.log("Dictionary value in getText:" + dictionary);
console.log("Dictionary[id] value in getText:" + dictionary);
if(dictionary[id] !== undefined) {
return dictionary[id];
} else {
return dictionary['text-not-found'];
}
}
}要完成解决方案，最好是处理来自getUsedDictionary()的可能异常，因为请求可能会失败。一个现代的选项是使用一个错误边界，或者您可以做一些其他类型的处理。
请注意，在进行此更改后，您可能必须适应您的代码来处理异步getText。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71963642
复制相关文章
相似问题
腾讯云开发者
