使用 Helmet 在 React 中注入 HTML 代碼

Question

我正在使用 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）：語法錯誤：/Users/Mac/Desktop/webapp /app/src/app/App.jsx：意外的保留字“讓”（17:12）

Answer 1

您通常不能將內聯 Javascript 放在 JSX 標簽中。

根據Helmet 文檔，您應該添加一個包含字符串的 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 元素或字符串（以及一些特定的其他內容）。

理論上的Javascript的某些部分（JS）JSX標簽之間的代碼將是“有效的”，只要它可以被解釋為一個字符串，如如console.log("hello"); ，但這並不是真正的 JS，它只是一個看起來像 JS 的字符串。 例如， console.log("XX]這樣的字符串在 JSX 中也是“有效的”，但不是有效的 JS 代碼。

您的代碼在let處引發錯誤，因為它是大括號{之后的第一件事。 之前的所有內容都可以解釋為字符串，但{表示 JS 表達式的開始，其中let無效。 （ let在 JS 中有效，但在 JS 表達式中無效。）

為什么解決方案有效：

（備注：我不知道 Helmet，但我可以解釋 JSX 的工作原理）

Helmet 文檔中的方式應該可以工作，因為大括號{ ... }表示一個 JS 塊，反引號表示一個多行字符串，所以反引號內的所有內容（即您要注入的 JS 代碼）是只是一個字符串，顯然頭盔會正確處理它，或者可能只是插入字符串而不懷疑它是否是有效的 JS。

所以這將是有效的 JSX，並且可能會被 Helmet 注入而沒有錯誤（？），但是當瀏覽器嘗試執行<script>內容時會拋出錯誤：

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