反应应用程序中的 dangerouslySetInnerHTML 不适用于包含 Segment.io 标记

Question

我正在尝试在我的 react/NextJS 应用程序中包含 Segment.io。我遵循之前设置 Google Analytics 的函数设置的约定

const segmentWriteKey = 'xyz';

export default class CustomDocument extends Document {
  setGoogleTags = () => {
    return {
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${gaTrackingId}');
        console.log('here2');
      `,
    };
  };

  setSegment = () => {
    return {
      __html: `
      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
              analytics.load(${segmentWriteKey});
              analytics.page();
              console.log('here1');
      `,
    };
  };

<script
            dangerouslySetInnerHTML={this.setGoogleTags() /* eslint-disable-line react/no-danger */}
          />
          <script
            dangerouslySetInnerHTML={this.setSegment() /* eslint-disable-line react/no-danger */ }
          />

我可以看到“here2”被调用，但从未看到“here1”。有什么想法吗？

Answer 1

您的函数似乎未正确关闭。需要在 __html 字符串中的函数末尾添加两个右括号：

      ...
      analytics.page();
      console.log('here1');
    };
  };
`,

我也不清楚${segmentWriteKey} 值的来源。除非您打算使用模板文字 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)，否则您可能不想要 ${} 语法。另外，调用analytics.load() 似乎需要两个参数。