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

此脚本是否必须作为组件堆的一部分嵌入？

在使用YouTube的iframe API时，我遇到了类似的问题，解决方案是创建脚本元素并引用一旦存在就创建的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 2

感谢https://github.com/nfl/react-helmet/issues/334#issuecomment-413319383弄清楚了。

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

Answer 3

请谨慎使用dangerouslySetInnerHTML，如下所示：


<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-*******');
`,
  }}
/>

但请注意cross-site scripting (XSS) attacks。

通过react-helmet添加脚本标签时，如何忽略TypeScript错误？

3 个答案: