Question

我一直在尝试导入外部库（谷歌地图），以便在React组件中使用它

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>

反应文件

  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>
    }

我得到的错误是：

未捕获的ReferenceError：谷歌未定义

我已经尝试了一切，但似乎没有任何工作。如何从组件内的此脚本访问变量？

这只是一个示例，请不要告诉我使用其中一个NPM软件包来反映Google地图。

谢谢，哈里斯

Answer 1

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

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

如果您仍然遇到问题，请尝试在debugger;功能中添加didComponentMount()行，如果google已加载且可用，请检查控制台。

Answer 2

通常，您可以使用以下命令导入脚本：

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
}

Answer 3

晚了一点，但我也遇到了这个问题，对我来说，这是埃斯林特造成的。要禁用它，只需在声明该变量的位置上方添加注释/*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>
    }

React，从组件

3 个答案: