Вставка пользовательского скрипта в React Helmet / Gatsby

У меня есть специальный скрипт, который я пытаюсь встроить в React Helmet от третьего лица.

Обычно скрипты предоставляются только как URL-адрес src. Если мне дадут код ниже, как лучше всего встроить скрипт с помощью React Helmet?

    <script>
document.getElementsByTagName('head')[0].appendChild(function(s){
    var d=document,m2g=d.createElement('script'),l=function(){Mobi2Go.load(s.container,s.ready);},jq=window.jQuery&&+window.jQuery.fn.jquery.replace(/^(\d+).*$/,'$1')===1&&+window.jQuery.fn.jquery.replace(/^\d+\.(\d+).*$/,'$1')>=7,qs=window.location.search.substring(1),re='=(.*?)(?:;|$)',c=d.cookie.match('MOBI2GO_SESSIONID'+re),w=window.innerWidth;
    m2g.src='https://www.mobi2go.com/store/embed/1990-v8oL.js?'+qs+(jq?'&no_jquery':'')+(c?'&s='+c[1]:'')+'&device_width='+w;
    if(m2g.onload!==undefined)m2g.onload=l;else m2g.onreadystatechange=function(){if(m2g.readyState!=='loaded'&&m2g.readyState!=='complete')return;m2g.onreadystatechange=null;l();}
    window.Mobi2Go_est = +(new Date);
    return m2g;
}({
    container: 'Mobi2Go-Storefront', // Replace with ID  of the element to inject UI into
    ready: function() {} // Callback to fire when app is ready
}));
</script>

Очевидно, есть ошибки, если я включу все это в React Helmet. Не уверен, что лучше всего заставить его работать.

Я также попытался поместить его в файл html.js в gatsby

 import React from 'react';
import PropTypes from 'prop-types';

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
      <script
        dangerouslySetInnerHTML={{
          __html: `
          document.getElementsByTagName('head')[0].appendChild(function(s){
            var d=document,m2g=d.createElement('script'),l=function(){Mobi2Go.load(s.container,s.ready);},jq=window.jQuery&&+window.jQuery.fn.jquery.replace(/^(\d+).*$/,'$1')===1&&+window.jQuery.fn.jquery.replace(/^\d+\.(\d+).*$/,'$1')>=7,qs=window.location.search.substring(1),re='=(.*?)(?:;|$)',c=d.cookie.match('MOBI2GO_SESSIONID'+re),w=window.innerWidth;
            m2g.src='https://www.mobi2go.com/store/embed/1990-v8oL.js?'+qs+(jq?'&no_jquery':'')+(c?'&s='+c[1]:'')+'&device_width='+w;
            if(m2g.onload!==undefined)m2g.onload=l;else m2g.onreadystatechange=function(){if(m2g.readyState!=='loaded'&&m2g.readyState!=='complete')return;m2g.onreadystatechange=null;l();}
            window.Mobi2Go_est = +(new Date);
            return m2g;
        }({
            container: 'Mobi2Go-Storefront', // Replace with ID  of the element to inject UI into
            ready: function() {} // Callback to fire when app is ready
        })););
        `,
        }}
      />
    </html>
  );
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
};

reactjs javascript gatsby react-helmet embed
person Aquasar    schedule 29.05.2020    source источник
comment
Пожалуйста, добавьте сообщения об ошибках, которые вы упомянули, в свой вопрос   -  person Robin Métral    schedule 01.06.2020

Ответы (2)


arrow_upward
0
arrow_downward

Он должен работать с react-helmet, примеры этого есть в README.

Возможно, в вашем теге script отсутствует type="text/javascript":

<script type="text/javascript">
  // your script goes here
</script>

Альтернативный вариант, если это не работает для вас, - настроить html.js Гэтсби.

person Robin Métral    schedule 30.05.2020
comment
Ни одно из этих решений не работает для меня. Дело в том, что есть много нестандартного кода, который я не понимаю, и размещение его на шлеме React или htm.js не работает для меня. У вас есть пример? - person Aquasar; 30.05.2020
comment
Если это не сработает, мне понадобится отладочная информация, которая поможет вам в дальнейшем (сообщение об ошибке и т. Д.). Вероятно, проблема в вашем скрипте, а не в React Helmet или Gatsby. - person Robin Métral; 30.05.2020
comment
Сценарий приведен выше. Это исходит от третьей стороны. Сможете ли вы реализовать это на своей стороне с помощью React Helmet? - person Aquasar; 01.06.2020

arrow_upward
0
arrow_downward

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

<Helmet>
  <script>
    {`alert( 'Hello, world!' );`}
  </script>
 </Helmet>

person Jamal Basha    schedule 15.07.2021