在React中使用Helmet注入HTML代码触发let语法错误如何解决

你遇到的是JSX语法解析规则导致的编译错误。在JSX语法中，<script>标签内直接编写的JavaScript代码会被Babel当作当前组件逻辑的一部分进行编译，而非你预期的要注入到HTML中的原生静态脚本内容。
你当前的Babel编译配置没有将这部分内嵌脚本的ES6语法（你使用了let关键字）转译为ES5兼容语法，所以编译时直接识别到保留字let抛出了语法错误。

提供两种可行的修复方式：

• 方式1：使用dangerouslySetInnerHTML注入脚本内容
  把你原来的<script>标签替换为以下写法，直接把脚本内容作为字符串注入，避免Babel解析脚本内部的代码：

<script
  type="text/javascript"
  dangerouslySetInnerHTML={{
    __html: `
      window._mfq = window._mfq || [];
      (function() {
          let mf = document.createElement("script");
          mf.type = "text/javascript"; mf.defer = true;
          mf.src = "//cdn.mouseflow.com/projects/xyz.js";
          document.getElementsByTagName("head")[0].appendChild(mf);
      })();
    `
  }}
/>

• 方式2：单独引入外部脚本
  你可以把这段Mouseflow的初始化代码单独存为静态JS文件（比如存为public/js/mouseflow.js），然后在Helmet中直接引入外部脚本即可：

<Helmet>
  <base />
  <script type="text/javascript" src="/js/mouseflow.js" defer />
</Helmet>

两种方式都可以解决当前的编译报错，功能实现上没有差异。

内容的提问来源于stack exchange，提问作者user17267062