Реализация response-async-script: упаковка компонента
Я пытаюсь обернуть компонент реакции, для которого требуется api карт Google, с 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
Согласно документация следующие свойства могут быть указаны для обеспечения завершения загрузки ресурса JavaScript:
asyncScriptOnLoad: function : called after script finishes loading. using script.onload
или
callbackName: string : If the script needs to call a global function when finished loading (for example: recaptcha/api.js?onload=callbackName). Please provide the callback name here and it will be autoregistered on window for you.
В случае события 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);