Как использовать объект Window в ReactJS?

Я хочу загрузить Google APIs client library внутри моего index.html, а onLoad='someMethod' вызовет метод в отдельном файле javascript. Затем этот метод будет распечатан на консоли.Как использовать объект Window в ReactJS?

Клиентская библиотека загружается без каких-либо проблем, но сообщение не распечатывается в консоли, и я думаю, что это потому, что метод вообще не вызывается.

Вот мой 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>

Вот Javascript файл, который содержит 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);

Если это был обычный Java-метод будет выглядеть следующим образом:

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

Есть что-нибудь в es6, что похоже на объект window.

источник

2016-05-06 hellomoto

Компонентные методы не привязаны к объекту window. MyApp.handleGoogleClientLoad не будет псевдонимом window.handleGoogleClientLoad, который, вероятно, пытается вызвать скрипт API Google.

Если вы хотите, чтобы Google API вызывал метод на вашем компоненте, у вас возникнут проблемы, так как нет гарантии, что ваш компонент будет смонтирован до или после загрузки вашего API-интерфейса API. Если вы хотите гарантировать, что вам придется приложить сценарий после установки компонента и зарегистрировать функцию в методе componentDidMount. Вы можете использовать что-то вроде loadjs

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

источник

2016-05-06 21:48:38 Aweary

Я еще не пробовал использовать loadjs, но я добавил в метод 'componentDidMount()', и все работает отлично. Благодаря! – hellomoto

Как добавить элемент скрипта google API для загрузки до загрузки материала реакции? '<сценарий SRC = "https://apis.google.com/js/client.js?onload=handleGoogleClientLoad"> <сценарий SRC = "Библиотека/vendors.js"> <сценарий SRC =" сборки /bundle.js ">' – Bwaxxlo

window объект по-прежнему будет доступен вам из вашего реагирующего компонента .. но проблема в том, что вы точно определяете свою функцию, но вы ее нигде не называете (это синтаксис jsonp в URL-адресе этого скрипта ?). если вы хотите эту функцию, чтобы выполнить, когда вы смонтировать компонент, вы можете использовать component lifecycle hooks, в частности, componentDidMount

class MyApp extends React.Component { 

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

componentDidMount(){ 
    this.handleGoogleClientLoad(); 
} 

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

если вы хотите сохранить синтаксис у вас уже есть, то вы можете пойти дальше и получить доступ к window способ, который вы предлагаете, но его определенно не очень реагирует на это.

источник

2016-05-06 21:43:16 PhilVarg

это будет вызывать '' handleGoogleClientLoad' когда MyApp' монтирует, не тогда, когда сценарий Google загружен. – Aweary

- это 'handleGoogleClientLoad', фактически зависящий от вашего реагирующего компонента? – PhilVarg

Как использовать объект Window в ReactJS?

ответ

Смежные вопросы