Question

我有一个具有以下结构的data.js文件：

var DATA= {
  "groups": [{
    "id": "1",
    "name": "group 1",
    "subgroups": [{}, {}, ...]
  }, ...],
  ...
}

如果我不能在文件中使用export，是否可以在我的React应用程序中加载该文件并使DATA var在任何组件中可用（我可能想使用它初始化Redux状态）并不能将其转换为常规JSON文件？基本上，我无法编辑此文件。如何实现？

Answer 1

您绝对可以在.js文件中使用导出。 export default或module.exports应该可以工作。如果您不使用语言转换器，请使用后面的方法。

var DATA = {
  "groups": [{
    "id": "1",
    "name": "group 1",
    "subgroups": [{}, {}, ...]
  }, ...],
  ...
}

module.exports = DATA;

否则，将文件转换为json格式并直接使用。

{
  "groups": [{
    "id": "1",
    "name": "group 1",
    "subgroups": [{}, {}, ...]
  }, ...],
  ...
}

反应应用程序file.js：

import data from './data.json';

// do something with data.groups

Answer 2

据我了解，您只有一个具有这种确切结构的文件，正在寻找一种在您的应用程序中访问该文件的方法。由于它使用var声明，因此您可以通过<script>标签将其包含在Web应用程序中，并且DATA变量将在您的代码中全局可用。如果使用TypeScript或FlowType，则还应提供一个带有declare var DATA: Data;的声明文件，其中Data是描述此数据对象结构的自定义接口。但是，我建议的是创建一个将使用该变量的模块，仅在该模块中提供一个声明，然后按我喜欢的方式对其进行转换并从那里导出它。只是为了让您了解它的外观：

interface Data {
    groups: Group[];
}

interface Group {
    id: string;
    name: string;
    subgroups: {}[];  // you might provide more type information here, but to begin it would do as well
}

declare var DATA: Data;

const APP_DATA: Data = DATA;
export default APP_DATA;

Answer 3

假设：

data.js文件在构建期间可用
文件具有预定义格式的内容
您正在使用Webpack捆绑您的应用程序（可选）

您可以使用webpack raw-loader（其他捆绑程序可能有替代方法）来加载文件的内容，然后解析内容以获取所需的数据。

示例

如何在React中加载外部js文件？

3 个答案: