Реализация response-async-script: перенос компонента - PullRequest
Новая
       8

Реализация response-async-script: перенос компонента

0 голосов
/ 04 ноября 2018

Я пытаюсь обернуть компонент реагирования, который требует API Google Maps, с makeAsyncScriptLoader из react-async-script.

В том же файле (если это имеет значение): 

class SearchBar extends Component {
    /* Some stuff requiring the maps api */
}

const callbackName = "onloadcallback";
const URL = `https://maps.googleapis.com/maps/api/js?key=AIzaSyDSn_vNbNZzrcFxl8bV3MH1j0kuoLVsOCQ&callback=${callbackName}`;
const globalName = "foo";

export default makeAsyncScriptLoader(URL, {
  callbackName: callbackName,
  globalName: globalName
})(SearchBar);

Насколько я понимаю, я смогу вызвать компонент из другого файла, импортировав SearchBarWrapper из указанного выше файла и используя его как <SearchBarWrapper />.

По сути, это не работает. Компонент пытается загрузить без сценария и не удается.

1 Ответ

0 голосов
/ 10 ноября 2018

В соответствии с документацией можно указать следующие свойства, чтобы обеспечить завершение загрузки ресурса JavaScript:

asyncScriptOnLoad: функция: вызывается после завершения загрузки скрипта. используя script.onload

или

callbackName: string: если скрипт должен вызывать глобальную функцию по окончании загрузки (например: ReCaptcha / api.js? OnLoad = callbackName). Пожалуйста, предоставьте обратный звонок имя здесь, и он будет автоматически зарегистрирован в окне для вас.

Для случая asyncScriptOnLoad может быть введено следующее HOC , чтобы гарантировать, что упакованный компонент будет отображаться после загрузки ресурса JavaScript: 

function withScript(url, WrappedComponent) {

  const LoadingElement = props =>  {
      return <div>Loading...</div>;
  }

  class Wrapper extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        scriptLoaded: false
      };
    }
    render() {
      const AsyncScriptLoader = makeAsyncScriptLoader(url)(LoadingElement);
      if(this.state.scriptLoaded){
         return <WrappedComponent/>
      } 
      return (
        <AsyncScriptLoader
          asyncScriptOnLoad={() => {
            this.setState({scriptLoaded: true});
          }}
        />
      );
    }
  }
  return Wrapper;
}

Теперь компонент Google Maps может отображаться так: 

const GoogleMapsUrl = `https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDurZQBXjtSzKeieXwtFeGe-jhZu-HEGQU`;
const App = withScript(GoogleMapsUrl, Autocomplete);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Демо

...