如何在通过react-helmet添加脚本标记时忽略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#issuecomment-413319383才弄明白了。

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

Answer 2

这个脚本必须作为组件堆的一部分嵌入吗？

我在使用YouTube的iframe API时遇到了类似的问题，解决方案是创建script元素并引用创建的javascript对象(如果您需要这样做，看起来您实际上只是想导入一些JS)。我不需要为此创建react组件，除非有我想要管理的可视元素。

// 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组件，并将构造函数逻辑移动到componentDidMount。或者，我会考虑将任何结果数据发送到存储，并使用单独的组件来呈现结果数据。

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。