Как загрузить javascript код внутри тегов скрипта в компоненте React? - PullRequest
Новая
       12

Как загрузить javascript код внутри тегов скрипта в компоненте React?

0 голосов
/ 10 января 2020

У меня есть виджет «Карта», который загружается по нажатию кнопки после перенаправления на новую страницу.

Перенаправление происходит через history.push() со страницы 1 на страницу 2, где загружается карта. Это отлично работает при первом нажатии, но как только вы go вернетесь на страницу 1 и снова нажмете кнопку, произойдет перенаправление на страницу 2. Но карта не загрузится.

Когда я заменил history.push() на window.location.assign() работает нормально, так как элементы DOM обновляются каждый раз, но мне нужно это для работы с history.push() без ссылки на страницу sh.

Код виджета карты: 

<ins class="bookingaff" data-aid="" data-target_aid="" data-prod="map" data-width="100%" data-height="590" data-lang="ualng" data-dest_id="0" data-dest_type="landmark" data-latitude="" data-longitude="" data-landmark_name="" data-mwhsb="1" data-address="">
  <!-- Anything inside will go away once widget is loaded. -->
  <a href="//www.booking.com?aid=">Booking.com</a>
</ins>
<script type="text/javascript">
  (function(d, sc, u) {
     var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
     s.type = 'text/javascript';
     s.async = true;
     s.src = u + '?v=' + (+new Date());
     p.parentNode.insertBefore(s,p);
   })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>

Я попытался загрузить внешний файл сценария в componentDidMount () на странице 2, где виджет «Карта» должен загружаться через пакет с именем postscribe, но проблема все еще сохраняется. 

componentDidMount(){

 postScribe('#bookingmap','<script 
 language="javascript"src="//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js"></script>');

}

Другое решение, которое я попробовал: 

componentDidMount(){

     const script = document.createElement("script");
     script.src = "//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js";
     script.async = true;
     document.head.appendChild(script);

}

Во всех этих случаях Карта загружается при первом нажатии, но как только вы go вернетесь на страницу 1 и повторно нажмете кнопку для страницы 2, перенаправление произойдет без загрузки карты. Я чувствую, что элементы DOM необходимо воссоздать? Любые советы по этому вопросу будут оценены!

...