React，从组件中的脚本访问 var
[英]React, accessing a var from a script in a component
问题描述
I have been trying to import an external library (google Maps) in order to use it in a React component
我一直在尝试导入一个外部库（谷歌地图）以便在 React 组件中使用它
index.html file index.html文件
<div id="app"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback=initMap" async defer>
react file反应文件
componentDidMount() {
this.map = new google.maps.Map(this.refs.map, {
center: {lat: this.props.lat, lng: this.props.lng},
zoom: 8
});
}
render() {
return <div>
<p>I am a map component</p>
<div id="map" ref="map"/>
</div>
}
The error I get is:我得到的错误是：
Uncaught ReferenceError: google is not defined
I have tried everything but nothing seems to be working.我已经尝试了一切，但似乎没有任何效果。 How do I access the variable from this script inside my component?如何从我的组件内的这个脚本访问变量？
This is just an example, please do not tell me to use one of the NPM packages for React Google Maps.这只是一个例子，请不要告诉我使用 React Google Maps 的 NPM 包之一。
Thanks, Harris谢谢，哈里斯
3 个解决方案
解决方案1
8 2019-09-23 23:51:52
A little late to the party but I also had this issue and for me it was caused by eslint.聚会有点晚了，但我也遇到了这个问题，对我来说这是由 eslint 引起的。 To disable it just add the comment /*global google*/ above where you declare the variable and it should work eg要禁用它，只需在声明变量的地方添加注释/*global google*/ ，它应该可以工作，例如
componentDidMount() {
/*global google*/ // To disable any eslint 'google not defined' errors
this.map = new google.maps.Map(this.refs.map, {
center: {lat: this.props.lat, lng: this.props.lng},
zoom: 8
});
}
render() {
return <div>
<p>I am a map component</p>
<div id="map" ref="map"/>
</div>
}
You can also use the window object to make the call:您还可以使用 window 对象进行调用：
componentDidMount() {
/* Use new window.google... instead of new google... */
this.map = new window.google.maps.Map(this.refs.map, {
center: {lat: this.props.lat, lng: this.props.lng},
zoom: 8
});
}
render() {
return <div>
<p>I am a map component</p>
<div id="map" ref="map"/>
</div>
}
解决方案2
1 已采纳 2017-01-06 15:18:29
The error is because the google api is not loaded before your React Component is loading.错误是因为在加载 React 组件之前未加载 google api。
Place the script tag for google in the header, before loading your react scripts.在加载您的反应脚本之前，将 google 的脚本标记放在标题中。
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback=initMap" async defer>
<!-- React scripts here -->
</head>
If you're still having trouble, try adding a debugger;如果您仍然遇到问题，请尝试添加debugger; line in didComponentMount() function and check in the console if google is loaded and available.在didComponentMount()函数中didComponentMount()一行，并在控制台中检查google是否已加载且可用。
解决方案3
1 2019-10-16 09:57:05
In general you can import a script with the following:通常，您可以使用以下内容导入脚本：
let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";
document.head.appendChild(aScript);
NOTE: Before you can use the variable, the script has to load in!注意：在使用变量之前，必须加载脚本！
After the script is loaded you can use a variable from the script with加载脚本后，您可以使用脚本中的变量
window.variable
(in this case) （在这种情况下）
window.google.maps.whatever
If you want to use a variable directly after a script is imported (on page load etc) you can do something like this:如果您想在导入脚本后（在页面加载等时）直接使用变量，您可以执行以下操作：
let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";
document.head.appendChild(aScript);
aScript.onload = function() {
window.variableFromScript.whatever
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.