Javascript React，从组件中的脚本访问var_Javascript_Google Maps_Reactjs

Javascript React，从组件中的脚本访问var

javascript google-maps reactjs

Javascript React，从组件中的脚本访问var,javascript,google-maps,reactjs,Javascript,Google Maps,Reactjs,我一直在尝试导入外部库GoogleMaps，以便在React组件中使用它 index.html文件反应文件我得到的错误是：未捕获引用错误：未定义google 我什么都试过了，但似乎什么都没用。如何从组件中的脚本访问变量这只是一个例子，请不要告诉我使用谷歌地图的NPM包之一谢谢， Harris错误是因为在加载React组件之前没有加载google api 在加载react脚本之前，将google的脚本标记放在标题中 <head> <script type="te

我一直在尝试导入外部库GoogleMaps，以便在React组件中使用它

index.html文件

反应文件

我得到的错误是：

未捕获引用错误：未定义google

我什么都试过了，但似乎什么都没用。如何从组件中的脚本访问变量

这只是一个例子，请不要告诉我使用谷歌地图的NPM包之一

谢谢，

Harris

错误是因为在加载React组件之前没有加载google api

在加载react脚本之前，将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>

如果仍然有问题，请尝试添加调试器；输入didComponentMount函数，并在控制台中检查google是否已加载且可用。

错误是因为在加载React组件之前未加载google api

在加载react脚本之前，将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>

如果仍然有问题，请尝试添加调试器；输入didComponentMount函数，并在控制台中检查google是否已加载且可用。

聚会有点晚，但我也遇到了这个问题，对我来说，它是由eslint引起的。要禁用它，只需在上面声明变量的地方添加注释/*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>
    }

您还可以使用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>
    }

派对有点晚了，但我也有这个问题，对我来说，这是由埃斯林特引起的。要禁用它，只需在上面声明变量的地方添加注释/*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>
    }

您还可以使用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>
    }

通常，您可以导入具有以下内容的脚本：

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";
document.head.appendChild(aScript);

注意：在使用变量之前，必须先加载脚本

加载脚本后，可以使用脚本中的变量

window.variable

在这种情况下

window.google.maps.whatever

如果要在页面加载等操作中导入脚本后直接使用变量，可以执行以下操作：

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";

document.head.appendChild(aScript);

aScript.onload = function() {
    window.variableFromScript.whatever
}

通常，您可以导入具有以下内容的脚本：

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";
document.head.appendChild(aScript);

注意：在使用变量之前，必须先加载脚本

加载脚本后，可以使用脚本中的变量

window.variable

在这种情况下

window.google.maps.whatever

如果要在页面加载等操作中导入脚本后直接使用变量，可以执行以下操作：

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";

document.head.appendChild(aScript);

aScript.onload = function() {
    window.variableFromScript.whatever
}

尝试将google include移动到应用程序javascript文件上方，并同步加载。这不是最好的方法，但如果你不想使用NPM软件包，应该可以解决你的问题。导入google map api之前是否加载了组件？@TMitchell我甚至在头部和身体内部尝试了你的解决方案，但出现了相同的错误。你使用webpack吗？尝试将google include移动到你的应用程序javascript文件上方，并同步加载它。这不是最好的方法，但是如果你不想使用NPM软件包，应该可以解决你的问题。你在导入google map api之前加载了你的组件吗？@TMitchell我甚至在头部和身体内部尝试了你的解决方案，但同样的错误也发生了。你使用webpack吗？你能发布整个html文件吗？应该是这样的顺序：-Google脚本在头部，然后：-React lib脚本在头部，然后：-在body，divapp，然后：-App JS文件在body的末尾我不知道这之前是如何不起作用的，但这次它确实起作用了。多谢各位much@Eristikos也许脚本现在已缓存，加载速度更快。我建议删除async属性，这里可能存在竞争条件。你能发布整个html文件吗？应该是这样的顺序：-Google脚本在头部，然后：-React lib脚本在头部，然后：-在body，divapp，然后：-App JS文件在body的末尾我不知道这之前是如何不起作用的，但这次它确实起作用了。多谢各位much@Eristikos也许脚本现在已缓存，加载速度更快。我建议删除async属性，这里可能存在竞争条件window.google帮我做了这个技巧//我把这个技巧放在了我的html头Windows.google帮我做了这个技巧//我把这个技巧放在了我的html头中