发表新帖
发表新帖

React, accessing a var from a script in a component

前端 未结
关注
3 1486
旧时难觅i
旧时难觅i 2021-01-24 17:46

I have been trying to import an external library (google Maps) in order to use it in a React component

index.html file 



        

                      

              相关标签:
3条回答
  • 情书的邮戳
    2021-01-24 18:08

    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
}
    0 讨论(0)
  • 闹比i
    2021-01-24 18:12

    The error is because the google api is not loaded before your React Component is loading.

    Place the script tag for google in the header, before loading your react scripts.

    <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; line in didComponentMount() function and check in the console if google is loaded and available.

    0 讨论(0)
  • 南方客
    2021-01-24 18:19

    A little late to the party but I also had this issue and for me it was caused by eslint. To disable it just add the comment /*global google*/ above where you declare the variable and it should work e.g.

      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:

      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>
    }
    0 讨论(0)
 看不清?
提交回复
热议问题