1

我有一个名为 ui-components.json 的 JSON 文件，其中包含移动应用程序中使用的用户界面组件的配置数据。以下是文件中的数据示例：

{
  "picker": {
    "color": {
      "choices": ["brown", "black", "red", "green"],
      "defaultChoice": "red"
    },
    "size": {
      "choices": ["small", "medium", "large"],
      "defaultChoice": "medium"
    },
    "direction": {
      "choices": ["north", "south", "east", "west"],
      "defaultChoice": "west"
    }
  },
  "number": {
    "size": {
      "choices": ["1", "2", "3", "4", "5"],
      "defaultChoice": "5"
    },  
  }
}

目前，正在有选择地导入此数据，如下所示 -

import { picker } from '../../config/ui-components';

虽然这可行，但导入的数据比必要的多得多（比上面的示例中显示的要多）。导入配置数据的文件只需要color，所以我尝试了下面的变体，但编辑器显示错误，果然，当尝试运行应用程序时，它抛出了错误。

// variations attempted
import { picker.color } from '../../config/ui-components';
import { picker.color as color } from '../../config/ui-components';
import { picker['color'] } from '../../config/ui-components';
import { picker['color'] as color } from '../../config/ui-components';

是否有可能做到这一点？如果是这样，正确的语法是什么？如果不是，为什么不呢？

4

2 回答 2

2

您无法导入部分 json 数据，但如果您使用的环境支持 commonjs 语法，您可以执行以下操作

let{
    picker:{
      color:colors
    }
  }=require("../../config/ui-components") //if the Json file extension is .json 

  console.log(colors)
于 2020-07-04T21:14:03.340 回答
0

所以我不知道您可以像这样直接导入 JSON 的环境，因此您可能正在使用一些处理文件的工具。不确定它是否支持类似的东西，但你也可以这样做：

import { picker } from '../../config/ui-components';

const pickerColor = picker.color;

在导入的早期执行此操作不太可能获得任何性能优势，除非您的工具支持我从未听说过的抖动 JSON。

于 2020-07-04T21:21:36.217 回答