web-dev-qa-db-fra.com

Comment utiliser l'objet fenêtre dans ReactJS?

Je veux charger la bibliothèque cliente des API Google dans mon index.html et le onLoad='someMethod' invoquera une méthode dans un fichier javascript séparé. Cette méthode sera ensuite imprimée sur la console.

La bibliothèque client est chargée sans aucun problème mais le message n'est pas imprimé sur la console et je pense que c'est parce que la méthode n'est pas du tout invoquée.

Voici mon 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>

Voici le fichier javascript qui contient la méthode 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);

Si c'était du javascript, la méthode ressemblerait à ceci:

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

Y a-t-il quelque chose dans es6 qui est similaire à l'objet window.

javascriptreactjsecmascript-6
17
hellomoto

Les méthodes de composant ne sont pas attachées à l'objet window. MyApp.handleGoogleClientLoad ne va pas être aliasé à window.handleGoogleClientLoad, ce que le script de l'API Google tente probablement d'invoquer.

Si vous voulez que l'API Google appelle une méthode sur votre composant, vous allez avoir des problèmes car il n'y a aucune garantie que votre composant sera monté avant ou après le chargement de votre script Google API. Si vous voulez garantir que vous devrez injecter le script après le montage du composant et enregistrer la fonction dans la méthode componentDidMount. Vous pouvez utiliser quelque chose comme loadjs

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

l'objet window sera toujours à votre disposition à partir de votre composant react .. mais le problème est que vous définissez votre fonction très bien, mais vous ne l'appelez nulle part (est-ce que la syntaxe jsonp dans l'url de cette scénario?). si vous voulez que cette fonction s'exécute lorsque vous montez votre composant, vous pouvez utiliser les hooks du cycle de vie du composant , en particulier, componentDidMount

class MyApp extends React.Component {

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

componentDidMount(){
  this.handleGoogleClientLoad();
}

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

si vous voulez conserver la syntaxe que vous avez déjà, vous pouvez continuer et accéder au window comme vous le suggérez, mais ce n'est certainement pas une façon très réactive de le faire

0
PhilVarg