React-只運行一次加載外部js文件的文件（gapi未定義）

Question

我正在嘗試使用帶有React.js的gmail API。

我不斷收到錯誤'gapi未定義'。我相信我的client.js文件中的HTML是我mail.js文件運行後加載？

我該如何解決這個問題？

的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

我認爲你是對的。我在處理這些情況的方法是通過加載從陣營外部JS文件，並承諾使用它。

所以，你的流程應該是這樣的：

1. 陣營應用程序加載
2. 陣營應用注入你的文件中的HTML
3. 做你的事在步驟2中的回調或。那麼（）

創建一個輔助函數。把它像一個helpers/load-script文件夾中。下面你把所有的代碼，你應該在該文件中：

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

下，進口的組件內部的功能，你想用它分爲：

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;