如何加载外部js文件并在reactjs中使用它们的数据？
提问于 2019-12-11 06: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 08: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 07: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
复制相关文章
![那些最受欢迎的 Node.js 视图引擎[每日前端夜话0xA7]](https://ask.qcloudimg.com/http-save/yehe-1120945/431eud75e8.jpeg)
点击加载更多
相似问题
实时服务器错误: InvalidArgumentException第137行中的FileViewFinder.php :视图[欢迎]未找到
InvalidArgumentException在FileViewFinder.php第137行中:未找到视图[books.edit]
Laravel 5 InvalidArgumentException在FileViewFinder.php第137行:视图[.admin]未找到
Fileviewfinder.php第137行中的InvalidArgumentException
FileViewFinder.php第137行中的Laravel InvalidArgumentException：
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
