如何加载外部 js 文件并在 reactjs 中使用它们的数据？

Question

我正在使用create-react-app做一个反应项目，我目前的目标是加载一个外部 js 文件（托管在 iis 中）并使用它们的数据。

我通过 index.html 中的脚本获取此文件，例如：

<script type="text/javascript" src="http://localhost:5000/GetJsFile"></script>

我的js文件示例：

var data = {
   vars: {
      id: ****,
      user ******,
      name: *******,
      date: *******,
   }
   //...
}

我的问题是：如何在 react js 的组件中使用/访问来自 js 文件的数据？

Answer 1

在您的 utils.js 页面中

您必须将代码更改为此形状：

实用程序页面

const data = {
   vars: {
      id: ****,
      user ******,
      name: *******,
      date: *******,
   }
   //...
}
export default data;

然后在其他要使用此数据的组件中编写以下代码：

import data from '../../../../utils';

...
console.log('data', data);

Answer 2

直接从 html 文件加载 JSON 数据的问题是它不能供您的反应代码使用。

由于您是从外部源加载它，因此您需要使用诸如fetch 、 axios或superagent 之类的东西来检索它。

您可以使用 async/await 或 promises。

async function loadJsonFromExternal() {
    const dataFromJSON = await axios.get('http://localhost:5000/GetJson');
    return dataFromJSON;
}

假设你的component.js文件是这样的：

import React, { useEffect } from 'react';
export default function CoolComponent (props) {
  let myName = 'Enigma';
  useEffect(() => {
      loadJsonFromExternal()
      .then((result) => { myName = result.name });
  }, [])
  return (
     <div>My name is: {myName}</div>
  )
}

那将是做的方法。