React-only run Datei einmal externe js-Datei geladen (gapi nicht definiert)

Question

Ich versuche, die Gmail-API mit React.js zu verwenden.

Ich bekomme immer den Fehler 'Gapi ist nicht definiert'. Ich glaube meine client.js Datei im HTML wird geladen, nachdem meine mail.js Datei läuft?

Wie kann ich das umgehen?

Index.HTML

... 
<script src="https://apis.google.com/js/client.js"></script> 

Index.js

import './Mail.js'; 

Mail.js

import { createAction, handleActions } from 'redux-actions' 

const CLIENT_ID = '1.apps.googleusercontent.com' 
const SCOPES = ['https://www.googleapis.com/auth/gmail.readonly'] 

export const SET_GMAIL_CREDENTIALS = 'SET_GMAIL_CREDENTIALS' 
export const CHANGE_LOADING = 'CHANGE_LOADING' 
export const SET_GMAIL_LABELS = 'SET_GMAIL_LABELS' 
export const SELECT_GMAIL_LABEL = 'SELECT_GMAIL_LABEL' 
export const SET_GMAIL_EMAILS = 'SET_GMAIL_EMAILS' 

let defaultState = { 
    profile: { 
    emailAddress: '' 
    }, 
    loading: true, 
    labels: [], 
    currentLabel: null, 
    emails: [] 
} 

export const connect =() => { 
    return (dispatch, getState) => { 
    dispatch(turnLoadingOn()) 
    gmailAuth(false, populateCredentials(dispatch), clearCredentials(dispatch)) 
    } 
}... 

Answer 1

Ich glaube, du hast Recht. Die Art, wie ich diese Situationen behandle, besteht darin, die externe JS-Datei von React zu laden und sie in einem Versprechen zu verwenden.

So Ihre Flow in etwa so sein sollten: Lasten

1. Reagieren App
2. App Reagieren spritzen Dateien im HTML-
3. in Callback-Schritt 2 Ihre Sache tun oder .then()

Erstellen Sie eine Hilfsfunktion. Legen Sie es in einen Ordner wie helpers/load-script. Im Folgenden finden Sie den gesamten Code haben, sollten Sie in dieser Datei haben:

export default function loadScript(url, cb) { 
 

 
     var scr = document.createElement('script'); 
 
     scr.type = 'text/javascript'; 
 

 
     if (scr.readyState) { // IE 
 
     scr.onreadystatechange = function() { 
 
      if (scr.readyState ==`loaded' || scr.readyState ==='complete') { 
 
      scr.onreadystatechange = null; 
 
      cb(); 
 
      } 
 
     }; 
 
     } else { // Others 
 
     scr.onload = cb; 
 
     } 
 

 
     script.src = url; 
 
     document.getElementsByTagName('head')[0].appendChild(scr); 
 
    }

Als nächstes importieren, die innerhalb der Komponente funktionieren wollen, dass es in verwenden:

import React from 'react'; 
 
import loadScript from 'helpers/load-script'; 
 

 
class testComponent extends React.Component { 
 
    
 
    componentDidMount() { 
 
    loadScript('https://apis.google.com/js/client.js',() => { 
 
    // do mail api stuff here    
 
    }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div>hi there</div> 
 
    ); 
 
    } 
 
} 
 

 
export default testComponent;