使用 Helmet 在 React 中注入 HTML 代码答案

【问题标题】：Injecting HTML code in React using Helmet使用 Helmet 在 React 中注入 HTML 代码
【发布时间】：2021-10-29 07:10:22
【问题描述】：

我正在使用 Neutrino 创建我自己的 React 应用程序。我想为此添加一些 HTML 代码到我的代码中。我正在使用 React Helmet，但出现错误。我不明白原因。

下面是我的代码

import {Helmet} from 'react-helmet';
import {hot} from 'react-hot-loader';

import React from 'react';

import './App.css';
import Main from './main/Main';


const App = () => (
  <div className='App'>
    <Helmet>
      <base />
        <script type="text/javascript">
          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);
          })();
      </script>
    </Helmet>
    <Main />
  </div>
);

export default hot(module)(App);

我得到的错误是：

./src/app/App.jsx 中的错误模块构建失败（来自 ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib/index.js）： SyntaxError: /Users/Mac/Desktop/webapp/app/src/app/App.jsx: Unexpected reserved word 'let' (17:12)

【问题讨论】：

嗨@Edd，通过查看错误“Unexpected reserved word 'let'”，我建议将let mf = document.createElement("script"); 更改为var mf = document.createElement("script");
仍然出现错误@max

标签： javascript reactjs

【解决方案1】：

您通常不能只将内联 Javascript 放在 JSX 标记中。

根据Helmet documentation，您应该添加一个包含字符串的Javascript块：

<script type="text/javascript">{`
    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);
    })();
`}</script>

为什么 JSX 中的 JS 不起作用：

React 中类似 HTML 的代码不是 HTML，而是 JSX。

作为 JSX 元素的子元素（在 JSX 标签之间），唯一允许的内容是其他 JSX 元素或字符串（以及其他一些特定的东西）。

理论上，JSX 标记之间的 Javascript (JS) 代码的某些部分会是“有效的”，只要它可以解释为字符串，例如console.log("hello");，但那不是真正的 JS，它只是一个看起来像 JS 的字符串。例如。 console.log("XX] 这样的字符串在 JSX 中也是“有效的”，但不是有效的 JS 代码。

您的代码在let 处引发错误，因为它是大括号{ 之后的第一件事。之前的所有内容都可以解释为字符串，但{ 表示JS 表达式的开始，其中let 无效。（let 在 JS 中有效，但在 JS 表达式中无效。）

为什么解决方案有效：

（备注：我不知道 Helmet，但我可以解释一下 JSX 工作的原因）

Helmet documentation 中的方式应该可以工作，因为花括号{ ... } 表示一个 JS 块，反引号表示一个多行字符串，所以反引号内的所有内容（即你要注入的 JS 代码) 只是一个字符串，显然 Helmet 会正确处理它，或者可能只是插入字符串而不质疑它是否是有效的 JS。

所以这将是有效的 JSX，并且可能会被 Helmet 无错误地注入（？），但是当浏览器尝试执行 <script> 内容时会抛出错误：

<script type="text/javascript">{`
    some invalid javascript code ¯\_(ツ)_/¯
`}</script>

【讨论】：