将 html 脚本集成到 React 应用程序时遇到问题答案

【问题标题】：Having a trouble integrating a html script to React app将 html 脚本集成到 React 应用程序时遇到问题
【发布时间】：2022-12-10 20:33:21
【问题描述】：

我想将此脚本添加到我的 Local React 应用程序

<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":"YmFja2dyb3VuZDogIzE1MTgxZDsgY29sb3I6ICM5MTk0YTE7IGJvcmRlcjogc29saWQgMHB4ICM5MTk0YTE7","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-helmet 库并执行此代码，但是我在这个 RemoteCalc 函数上遇到了 Parsing error: '}' expected. 错误。

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":"YmFja2dyb3VuZDogIzE1MTgxZDsgY29sb3I6ICM5MTk0YTE7IGJvcmRlcjogc29saWQgMHB4ICM5MTk0YTE7","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>
  )
}

PS：此脚本适用于 html 文件

【问题讨论】：

你从哪里得到那个脚本？什么是RemoteCalc？
这是来自 cashbackforex.com/tools/position-size-calculator-widget 的头寸规模计算器小部件，我不知道它是什么，它们没有显示任何文档。这个脚本在 html 文件上完美运行，我只想将它添加到 React 中。

标签： javascript html reactjs

【解决方案1】：

您可以尝试在您的index.html 中添加.js 文件：

<head>
<script type="text/javascript" src="https://www.cashbackforex.com/Content/remote/remote-widgets.js"> 
</script>
</head>

然后做：

const PositionSizeCalculator = () => {
  window.RemoteCalc({"Url":"https://www.cashbackforex.com", "TopPaneStyle":"YmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KCMzNDM1NDAgMCUsICMyNDI4MzEgMTAwJSk7IGNvbG9yOiB3aGl0ZTsgYm9yZGVyLWJvdHRvbTogbm9uZTs=","BottomPaneStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICM5MTk0YTE7","ButtonStyle":"YmFja2dyb3VuZDogIzM0MzU0MDsgY29sb3I6IHdoaXRlOyBib3JkZXItcmFkaXVzOiAyMHB4Ow==","TitleStyle":"dGV4dC1hbGlnbjogbGVmdDsgZm9udC1zaXplOiA0MHB4OyBmb250LXdlaWdodDogNTAwOw==","TextboxStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgY29sb3I6ICM5MTk0YTE7IGJvcmRlcjogc29saWQgMHB4ICM5MTk0YTE7","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">
    </div>
  )
}

【讨论】：

我试过了，但上面写着Property 'RemoteCalc' does not exist on type 'Window & typeof globalThis'.