2

В моем приложении rails я использую response.js (real-rails gem) для создания клиентской части моего приложения.
Я хочу использовать API карт Google, чтобы реализовать некоторую функцию геолокации.Как рассказать API загрузки API Google для поиска обратного вызова внутри компонента React?

class HomePage extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    initGeoTools(){ 
    console.log('callback invoked'); 
    } 

    render() { 
     return(
      <div> 
      //.. 
      <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools" 
async defer></script> 
      </div> 
     ); 
    } 
} 

initGeoToolsis не функция - это означает, что API скрипт оленья кожа видеть функцию обратного вызова в этой области.

Я где-то читал, что он должен видеть эту функцию в области окна. Так что я пытался взломать его так:

class HomePage extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    componentWillMount(){ 
    window.initGeoTools = function(){ 
     console.log('callback invoked'); 
    } 
} 

    render() { 
     return(
      <div> 
      //.. 
      <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools" 
async defer></script> 
      </div> 
     ); 
    } 
} 

В самом деле, что работает, но не делает смысл в этом контексте, так как от функции, определенной в окне я не имею доступа к среагировать компоненты материала.

В функции обратного вызова я хочу установить состояние api_ready: true, чтобы указать, что API был успешно загружен.

Итак, как я могу сказать API-скрипту искать функцию обратного вызова внутри компонента React?

ответ

1

Неделю назад я должен сделать компонент Map и я нашел this article где они использовали три сценария:

  • один кэшировать внешние сценарии;
  • один, чтобы позвонить в Google Maps Api, используя первый;
  • и последний, который является компонентом Wrapper, который можно использовать для соединения с картами api, которые передаются в качестве реквизита для обернутого компонента.
Смежные вопросы