代码之家 › 专栏 › 技术社区 › sunknudsen

如何在通过react添加脚本标记时忽略TypeScript错误?

react-helmet typescript reactjs

sunknudsen · 技术社区 · 5 年前

//@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> 标签vs 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-*******\');'
    }
  ]}
/>

1 回复 | 直到 5 年前

sunknudsen 5 年前

多亏了 https://github.com/nfl/react-helmet/issues/334#issuecomment-413319383

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

Carl Pryke 5 年前

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

我在使用YouTube的iframeapi时遇到了一个类似的问题,解决方案是创建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。或者,我会考虑将任何结果数据发送到存储,并使用一个单独的组件来呈现结果数据。

-1

Brandon 5 年前

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