如何加载外部js文件并在reactjs中使用它们的数据？
如何加载外部js文件并在reactjs中使用它们的数据？
提问于 2019-12-11 14:45:18
我正在使用create-react-app执行一个react项目，我的当前目标是加载一个外部js文件(该文件托管在iis中)并使用它们的数据。
我正在通过index.html中的一个脚本来获取这个文件，比如：
<script type="text/javascript" src="http://localhost:5000/GetJsFile"></script>我的js文件示例：
var data = {
vars: {
id: ****,
user ******,
name: *******,
date: *******,
}
//...
}我的问题是:如何使用/访问react组件中js文件中的数据？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-11 16:13:45
在您的utils.js页面中
必须将代码更改为此形状：
实用程序页面
const data = {
vars: {
id: ****,
user ******,
name: *******,
date: *******,
}
//...
}
export default data;然后，在您想要使用此数据的其他组件中，编写以下代码：
import data from '../../../../utils';
...
console.log('data', data);Stack Overflow用户
发布于 2019-12-11 15:09:12
直接从html文件加载JSON数据的问题是，您的react代码无法使用它。
因为您是从外部源加载它，所以需要使用fetch、axios或superagent之类的方法来检索它。
您可以使用异步/等待或承诺。
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>
)
}这就是该做的方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59288308
复制相关文章
相似问题
腾讯云开发者
