Come utilizzare l'oggetto finestra in ReactJS?

Voglio caricare il Google APIs client library all'interno del mio index.html e lo onLoad='someMethod' invocherà un metodo in un file javascript separato. Questo metodo verrà quindi stampato sulla console.Come utilizzare l'oggetto finestra in ReactJS?

La libreria client viene caricata senza problemi ma il messaggio non viene stampato dalla console e penso che sia perché il metodo non viene richiamato affatto.

Ecco il mio index.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Welcome</title> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
</head> 

<body> 
    <div id="app"></div> 
    <script src="lib/vendors.js"></script> 
    <script src="build/bundle.js"></script> 
    <script src="https://apis.google.com/js/client.js?onload=handleGoogleClientLoad"></script> 
</body>

Ecco il file javascript che contiene il metodo handleGoogleClientLoad:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import {Button} from 'react-bootstrap'; 

class MyApp extends React.Component { 

handleGoogleClientLoad() { 
    console.log('Success on load'); 
} 

render() { 
    return (
     <div> 
      <Button>Click Me</Button> 
     </div> 
    ); 
    } 
} 


const app = document.getElementById('app'); 

ReactDOM.render(<MyApp />, app);

Se questo è stato semplice javascript il metodo sarebbe simile a questa:

window.handleGoogleClientLoad = function() { 
    // Log to the console 
};

C'è qualcosa in es6 che è simile all'oggetto window.

fonte

2016-05-06 hellomoto

I metodi dei componenti non sono collegati all'oggetto window. MyApp.handleGoogleClientLoad non verrà alterato a window.handleGoogleClientLoad, che è probabile che lo script dell'API di Google provi a richiamare.

Se si desidera che l'API di Google chiami un metodo sul componente, si avranno dei problemi poiché non è garantito che il componente verrà montato prima o dopo il caricamento dello script dell'API di Google. Se si desidera garantire che si debba iniettare lo script dopo aver montato il componente e registrare la funzione nel metodo componentDidMount. Si può usare qualcosa di simile loadjs

componentDidMount() { 
window.handleGoogleClientLoad = function() { 
    // log to console 
} 
loadjs('https://apis.google.com/js/client.js?onload=handleGoogleClientLoad') 
}

fonte

2016-05-06 21:48:38 Aweary

Non ho ancora provato a usare 'loadjs', ma ho aggiunto il metodo' componentDidMount() 'e tutto funziona perfettamente. Grazie! – hellomoto

Che ne dici di aggiungere l'elemento script API di Google da caricare prima che venga caricato il materiale reattivo? ' ' – Bwaxxlo

l'oggetto window sarà ancora disponibile dal componente di risposta. Tuttavia, il problema è che si definisce la funzione in modo corretto, ma non si sta chiamando da nessuna parte (è la sintassi di jsonp nell'URL di quello script ?). se si desidera che la funzione da eseguire quando si monta l'apparecchio, è possibile utilizzare il component lifecycle hooks, nello specifico, componentDidMount

class MyApp extends React.Component { 

handleGoogleClientLoad() { 
    console.log('Success on load'); 
} 

componentDidMount(){ 
    this.handleGoogleClientLoad(); 
} 

render() { 
    return (
     <div> 
      <Button>Click Me</Button> 
     </div> 
    ); 
    } 
}

se si desidera mantenere la sintassi già avete, allora si può andare avanti e accedere al window come suggerisci, ma non è un modo molto reattivo per farlo

fonte

2016-05-06 21:43:16 PhilVarg

Questo chiamerà '' handleGoogleClientLoad' quando monta myapp', non quando lo script di Google è stato caricato. – Aweary

è 'handleGoogleClientLoad' in realtà dipende dal tuo componente di reazione? – PhilVarg

Come utilizzare l'oggetto finestra in ReactJS?

risposta

Problemi correlati