本地React应用集成HTML脚本报错：react-helmet遇解析错误

我想把一段第三方HTML脚本加入本地React应用，这段脚本在纯HTML文件中运行正常，但用react-helmet集成时，RemoteCalc函数调用处出现Parsing error: '}' expected解析错误。

原HTML脚本 #

<div id="position-size-calculator-956132">
  <script type="text/javascript" src="https://www.cashbackforex.com/Content/remote/remote-widgets.js"></script>
  <script type="text/javascript"> RemoteCalc({"Url":"https://www.cashbackforex.com", "TopPaneStyle":"YmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KCMzNDM1NDAgMCUsICMyNDI4MzEgMTAwJSk7IGNvbG9yOiB3aGl0ZTsgYm9yZGVyLWJvdHRvbTogbm9uZTs=","BottomPaneStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7","ButtonStyle":"YmFja2dyb3VuZDogIzM0MzU0MDsgY29sb3I6IHdoaXRlOyBib3JkZXItcmFkaXVzOiAyMHB4Ow==","TitleStyle":"dGV4dC1hbGlnbjogbGVmdDsgZm9udC1zaXplOiA0MHB4OyBmb250LXdlaWdodDogNTAwOw==","TextboxStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7IGJvcmRlcjogc29saWQgMHB4ICM5MTk0YTE7","ContainerWidth":"665","DefaultInstrument":"EUR-USD","HighlightColor":"rgba(0,0,0,1.0)","IsDisplayTitle":false,"IsShowChartLinks":true,"IsShowEmbedButton":true,"CompactType":"large","Calculator":"position-size-calculator","ContainerId":"position-size-calculator-956132"});</script>
</div>

原React代码（报错版本） #

import {Helmet} from "react-helmet";

const PositionSizeCalculator = () => {
  return (
    <div id="position-size-calculator-956132">
      <Helmet>
      <script type="text/javascript" src="https://www.cashbackforex.com/Content/remote/remote-widgets.js"></script>
      <script type="text/javascript"> RemoteCalc({"Url":"https://www.cashbackforex.com", "TopPaneStyle":"YmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KCMzNDM1NDAgMCUsICMyNDI4MzEgMTAwJSk7IGNvbG9yOiB3aGl0ZTsgYm9yZGVyLWJvdHRvbTogbm9uZTs=","BottomPaneStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7","ButtonStyle":"YmFja2dyb3VuZDogIzM0MzU0MDsgY29sb3I6IHdoaXRlOyBib3JkZXItcmFkaXVzOiAyMHB4Ow==","TitleStyle":"dGV4dC1hbGlnbjogbGVmdDsgZm9udC1zaXplOiA0MHB4OyBmb250LXdlaWdodDogNTAwOw==","TextboxStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7IGJvcmRlcjogc29saWQgMHB4ICM5MTk0YTE7","ContainerWidth":"665","DefaultInstrument":"EUR-USD","HighlightColor":"rgba(0,0,0,1.0)","IsDisplayTitle":false,"IsShowChartLinks":true,"IsShowEmbedButton":true,"CompactType":"large","Calculator":"position-size-calculator","ContainerId":"position-size-calculator-956132"});</script>
      </Helmet>
    </div>
  )
}

错误原因 #

JSX解析器会把<script>标签内的代码当成JSX语法解析，脚本里的大括号{}和引号规则与JSX冲突，导致解析失败。

解决方法 #

方法1：用dangerouslySetInnerHTML包裹脚本内容 #

通过该属性直接注入脚本内容，绕开JSX解析器的语法检查：

import { Helmet } from "react-helmet";

const PositionSizeCalculator = () => {
  const scriptContent = `
    RemoteCalc({
      "Url":"https://www.cashbackforex.com", 
      "TopPaneStyle":"YmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KCMzNDM1NDAgMCUsICMyNDI4MzEgMTAwJSk7IGNvbG9yOiB3aGl0ZTsgYm9yZGVyLWJvdHRvbTogbm9uZTs=",
      "BottomPaneStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7",
      "ButtonStyle":"YmFja2dyb3VuZDogIzM0MzU0MDsgY29sb3I6IHdoaXRlOyBib3JkZXItcmFkaXVzOiAyMHB4Ow==",
      "TitleStyle":"dGV4dC1hbGlnbjogbGVmdDsgZm9udC1zaXplOiA0MHB4OyBmb250LXdlaWdodDogNTAwOw==",
      "TextboxStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7IGJvcmRlcjogc29saWQgMHB4ICM5MTk0YTE7",
      "ContainerWidth":"665",
      "DefaultInstrument":"EUR-USD",
      "HighlightColor":"rgba(0,0,0,1.0)",
      "IsDisplayTitle":false,
      "IsShowChartLinks":true,
      "IsShowEmbedButton":true,
      "CompactType":"large",
      "Calculator":"position-size-calculator",
      "ContainerId":"position-size-calculator-956132"
    });
  `;

  return (
    <div id="position-size-calculator-956132">
      <Helmet>
        <script type="text/javascript" src="https://www.cashbackforex.com/Content/remote/remote-widgets.js"></script>
        <script type="text/javascript" dangerouslySetInnerHTML={{ __html: scriptContent }} />
      </Helmet>
    </div>
  );
};

方法2：用useEffect在组件挂载后执行脚本 #

更贴合React生命周期，确保第三方脚本加载完成后再调用函数：

import { Helmet, useEffect } from "react-helmet";

const PositionSizeCalculator = () => {
  useEffect(() => {
    const initCalculator = () => {
      if (window.RemoteCalc) {
        window.RemoteCalc({
          Url: "https://www.cashbackforex.com",
          TopPaneStyle: "YmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KCMzNDM1NDAgMCUsICMyNDI4MzEgMTAwJSk7IGNvbG9yOiB3aGl0ZTsgYm9yZGVyLWJvdHRvbTogbm9uZTs=",
          BottomPaneStyle: "YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7",
          ButtonStyle: "YmFja2dyb3VuZDogIzM0MzU0MDsgY29sb3I6IHdoaXRlOyBib3JkZXItcmFkaXVzOiAyMHB4Ow==",
          TitleStyle: "dGV4dC1hbGlnbjogbGVmdDsgZm9udC1zaXplOiA0MHB4OyBmb250LXdlaWdodDogNTAwOw==",
          TextboxStyle: "YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7IGJvcmRlcjogc29saWQgMHB4ICM5MTk0YTE7",
          ContainerWidth: "665",
          DefaultInstrument: "EUR-USD",
          HighlightColor: "rgba(0,0,0,1.0)",
          IsDisplayTitle: false,
          IsShowChartLinks: true,
          IsShowEmbedButton: true,
          CompactType: "large",
          Calculator: "position-size-calculator",
          ContainerId: "position-size-calculator-956132"
        });
      }
    };

    // 检查脚本是否已加载
    const existingScript = document.querySelector('script[src="https://www.cashbackforex.com/Content/remote/remote-widgets.js"]');
    if (existingScript) {
      initCalculator();
    } else {
      // 动态加载脚本（可选，增强可靠性）
      const newScript = document.createElement('script');
      newScript.src = "https://www.cashbackforex.com/Content/remote/remote-widgets.js";
      newScript.onload = initCalculator;
      document.body.appendChild(newScript);
    }

    return () => {
      // 组件卸载时可添加清理逻辑（如移除动态脚本）
    };
  }, []);

  return (
    <div id="position-size-calculator-956132">
      <Helmet>
        <script type="text/javascript" src="https://www.cashbackforex.com/Content/remote/remote-widgets.js"></script>
      </Helmet>
    </div>
  );
};

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