Как я могу игнорировать ошибки TypeScript при добавлении тегов скрипта через реагирующий шлем?

Question

Следующий код TSX генерирует ошибки TypeScript. //@ts-ignore не работает

<Helmet>
  <script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-*******');
  </script>
</Helmet>

Следующий код работает, но я хотел бы использовать ребенка <script> тег против script свойство компонента.

<Helmet
  script={[
    {
      type: 'application/javascript',
      innerHTML: '(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({\'gtm.start\':new Date().getTime(),event:\'gtm.js\'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);})(window,document,\'script\',\'dataLayer\',\'GTM-*******\');'
    }
  ]}
/>

Answer 1

Разобрался благодаря https://github.com/nfl/react-helmet/issues/334.

<Helmet>
  <script>
    {`
      alert('BOOM');
    `} 
  </script>
</Helmet>

Answer 2

Этот сценарий должен быть встроен как часть вашей кучи компонентов?

Я столкнулся с аналогичной проблемой при использовании API iframe YouTube, и было решено создать элемент script и ссылаться на объекты javascript, созданные после того, как они существуют (если вам нужно сделать это, похоже, что вы буквально просто хотите импортировать JS). Мне не нужно было создавать компонент реакции для этого, если не было визуальных элементов, которыми я хотел бы управлять.

// GoogleTagManager.ts

export class GoogleTagManager {
  someVariable: someVariableType = null 

  constructor () {
    const script: HTMLScriptElement = <HTMLScriptElement>document.createElement('script')

    script.src = '[URL_TO_JS_FILE]'

    script.onload = (): void => console.log('loaded google tag manager')

    document.body.appendChild(script)
  }

  WaitForVariable (): void {
    let timeout: number

    const OnTimeout = (): void => {
      if (timeout) {
        clearTimeout(timeout)
      }

      if (typeof [TARGET_VARIABLE] !== 'undefined') {
        this.someVariable = [TARGET_VARIABLE]
        return
      }

      timeout = setTimeout(OnTimeout, 1000)
    }
  }
}

Если вы хотите отобразить некоторую информацию, вы можете превратить ее в React Component и переместить логику конструктора в componentDidMount. В качестве альтернативы я хотел бы рассмотреть отправку любых результирующих данных в хранилище и иметь отдельный компонент для рендеринга результирующих данных.

Answer 3

С осторожностью вы можете использовать dangerousSetInnerHTML так:

<script
  dangerouslySetInnerHTML={{
    __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-*******');
`,
  }}
/>

Но будьте осторожны с атаками через межсайтовый скриптинг (XSS).