He estado tratando de importar una biblioteca externa (Google Maps) para usarla en un componente React
archivo 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>reaccionar archivo
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> }El error que me sale es:
Error de referencia no capturado: Google no está definido
Lo he intentado todo, pero nada parece estar funcionando. ¿Cómo accedo a la variable desde este script dentro de mi componente?
Esto es solo un ejemplo, por favor no me digas que use uno de los paquetes NPM para React Google Maps.
gracias, harris
Un poco tarde para la fiesta, pero también tuve este problema y para mí fue causado por eslint. Para deshabilitarlo, simplemente agregue el comentario /*global google*/ arriba donde declara la variable y debería funcionar, por ejemplo
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> }También puede utilizar el objeto ventana para realizar la llamada:
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> }El error se debe a que la API de Google no se carga antes de que se cargue el componente React.
Coloque la etiqueta de script para google en el encabezado, antes de cargar sus scripts de reacción.
<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> Si aún tiene problemas, intente agregar un debugger; línea en la función didComponentMount() y verifique en la consola si google está cargado y disponible.
En general, puede importar un script con lo siguiente:
let aScript = document.createElement('script'); aScript.type = 'text/javascript'; aScript.src = "link to script"; document.head.appendChild(aScript);NOTA: ¡Antes de que pueda usar la variable, el script debe cargarse!
Después de cargar el script, puede usar una variable del script con
window.variable(en este caso)
window.google.maps.whateverSi desea utilizar una variable directamente después de importar un script (en la carga de la página, etc.), puede hacer algo como esto:
let aScript = document.createElement('script'); aScript.type = 'text/javascript'; aScript.src = "link to script"; document.head.appendChild(aScript); aScript.onload = function() { window.variableFromScript.whatever }