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

Question

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

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

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

Answer 1

你绝对可以在.js文件中使用export。 export default或module.exports应该有效。 如果您没有使用语言转换器，请使用后面的方法。

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

module.exports = DATA;

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

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

反应app file.js：

import data from './data.json';

// do something with data.groups

Answer 2

据我所知，你只有一个具有这种确切结构的文件，并且正在寻找一种在你的应用程序中访问它的方法。 由于它使用var声明，您可以通过<script>标记将其包含在Web应用程序中，并且DATA变量将在您的代码中全局可用。 如果使用TypeScript或FlowType，还应提供declare var DATA: Data;的声明文件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 （其他捆绑包可能有替代方法）来加载文件的内容，然后解析内容以获取所需的数据。

例子👇