Jak używać obiektu window w ReactJS?

Chcę załadować Google APIs client library wewnątrz mojego index.html, a onLoad='someMethod' wywoła metodę w oddzielnym pliku javascript. Ta metoda zostanie wydrukowana na konsoli.Jak używać obiektu window w ReactJS?

Biblioteka klientów jest ładowana bez żadnych problemów, ale komunikat nie jest drukowany przez konsolę i myślę, że dzieje się tak, ponieważ metoda nie jest w ogóle wywoływana.

Oto mój 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>

Oto plik JavaScript, który zawiera metodę 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);

Jeśli to był zwykły javascript metoda będzie wyglądać następująco:

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

Czy jest coś w języku es6 podobne do obiektu window.

Źródło

2016-05-06 hellomoto

Metody składowe nie są dołączone do obiektu window. MyApp.handleGoogleClientLoad nie zostanie zamienione na window.handleGoogleClientLoad, co prawdopodobnie wywołuje skrypt Google API.

Jeśli chcesz, aby interfejs API Google wywoływał metodę na Twoim komponencie, będziesz mieć problemy, ponieważ nie ma gwarancji, że Twój komponent zostanie podłączony przed lub po załadowaniu skryptu interfejsu API Google. Jeśli chcesz zagwarantować, że będziesz musiał wstrzyknąć skrypt po zamontowaniu komponentu i zarejestrować funkcję w metodzie componentDidMount. Można użyć coś jak loadjs

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

Źródło

2016-05-06 21:48:38 Aweary

Nie próbowałem jeszcze używać 'loadjs', ale dodałem metodę' componentDidMount() 'i wszystko działa idealnie. Dzięki! – hellomoto

Co powiesz na dodanie elementu skryptu Google API do załadowania zanim załaduje się materiał reagowania? ' ' – Bwaxxlo

Obiekt będzie nadal dostępny dla ciebie z komponentu reagowania .. ale problem polega na tym, że twoje zdefiniowanie funkcji jest w porządku, ale nie wywołujesz go nigdzie (czy ta składnia jsonp w adresie URL tego skryptu ?). jeśli chcesz tę funkcję do wykonania podczas montażu swój składnik, można skorzystać z component lifecycle hooks konkretnie componentDidMount

class MyApp extends React.Component { 

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

componentDidMount(){ 
    this.handleGoogleClientLoad(); 
} 

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

jeśli chcesz zachować składnię już masz, to możesz iść do przodu i uzyskać dostęp do window sposób, w jaki sugerujesz, ale to zdecydowanie nie jest bardzo reagujący sposób na wykonanie tej czynności.

Źródło

2016-05-06 21:43:16 PhilVarg

to będzie nazywać '' MyApp' handleGoogleClientLoad' gdy wierzchowce, a nie kiedy skrypt Google załadowany. – Aweary

jest "handleGoogleClientLoad" w rzeczywistości zależny od Twojego komponentu reagowania? – PhilVarg

Jak używać obiektu window w ReactJS?

Odpowiedz

Powiązane problemy