Pencere nesnesini ReactJS'de nasıl kullanırım?

Google APIs client library benim index.html içine yüklemek istiyorum ve onLoad='someMethod' ayrı bir javascript dosyasında bir yöntemi çağırır. Bu yöntem daha sonra konsola yazdırılacaktır.Pencere nesnesini ReactJS'de nasıl kullanırım?

İstemci kitaplığı herhangi bir sorun olmadan yüklenir ancak ileti konsoldan yazdırılmıyor ve bunun yöntemin hiç çağırılmadığı için olduğunu düşünüyorum. İşte

benim index.html geçerli:

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

bu yöntem şu şekilde görünecektir javascript düz olsaydı: Burada

<!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>

handleGoogleClientLoad yöntemini içeren javascript dosyasıdır:

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

Es6'da window nesnesine benzeyen bir şey var mı?

kaynak

2016-05-06 hellomoto

window nesnesine bileşen yöntemleri eklenmez. MyApp.handleGoogleClientLoad, google API komut dosyasının büyük olasılıkla denemeye çalıştığı window.handleGoogleClientLoad numaralı takma ad değildir.

Google API’nın bileşeninizde bir yöntemi çağırmasını isterseniz, bileşeninizin Google API komut dosyanızın yüklenmesinden önce veya sonra yükleneceğine dair bir garanti olmadığından bazı sorunlarınız olacaktır. Bileşeni monte ettikten sonra komut dosyasını enjekte etmeniz ve componentDidMount yöntemindeki işlevi kaydetmeniz gerektiğini garanti etmek istiyorsanız. Sen `MyApp` bağlar, Google komut yüklendiğinde değil ne zaman handleGoogleClientLoad`` arayacak loadjs

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

kaynak

2016-05-06 21:48:38 Aweary

Henüz 'loadjs' kullanmayı denemedim, ancak' componentDidMount() 'yöntemine ekledim ve hepsi mükemmel çalışıyor. Teşekkürler! – hellomoto

Tepki maddesi yüklenmeden önce yüklemek için google API komut dosyası öğesini eklemekten ne haber? ' ' – Bwaxxlo

window nesnesi, yine sizin tepki bileşeninizden size ulaşacaktır .. ancak sorun, işlevinizi iyi tanımlamanızdır, ancak istediğiniz yeri çağırmıyorsunuz (bu komut dosyasının URL'sindeki jsonp sözdizimi budur) ?). Eğer bileşeni monte zaman yürütmek için bu işlevi isterseniz zaten var sözdizimi tutmak istiyorsanız, daha sonra devam edebilir ve erişebilir, componentDidMount

class MyApp extends React.Component { 

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

componentDidMount(){ 
    this.handleGoogleClientLoad(); 
} 

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

özellikle component lifecycle hooks kullanılmasını yapabilir window önerdiğiniz şekilde, ancak bunun kesinlikle çok tepki vermediği bir yol yoktur.

kaynak

2016-05-06 21:43:16 PhilVarg

Bu gibi bir şey kullanabilirsiniz. – Aweary

, "handleGoogleClientLoad" aslında tepki bileşeninize bağlı mı? – PhilVarg

Pencere nesnesini ReactJS'de nasıl kullanırım?

cevap

İlgili konular