如何向 React 添加脚本函数

Question

我正在尝试将外部应用程序 Chameleon 添加到我的 React 应用程序中，为此我必须将 javascript function 添加到我的应用程序中。

我只想在特定情况下调用它，所以我不想在我的 index.html 中加载它。我尝试将它添加到组件的 render 函数中，如下所示：

render() {
  return(
    <div>
     <head>
      <script type="text/javascript">/* Chameleon - better user onboarding */!function(t,n,o){var a="chmln",c="setup identify alias track clear set show on off custom help _data".split(" ");n[a]||(n[a]={}),n[a].accountToken=o,n[a].location=n.location.href.toString();for(var e=0;e<c.length;e++)!function(){var t=n[a][c[e]+"_a"]=[];n[a][c[e]]=function(){t.push(arguments)}}();var s=t.createElement("script");s.src="https://fast.trychameleon.com/messo/"+o+"/messo.min.js",s.async=!0,t.head.appendChild(s)}(document,window,"TOKEN");
         chmln.identify(USER.ID_IN_DB, {     // Unique ID of each user in your database (e.g. 23443 or "590b80e5f433ea81b96c9bf6")
            email: USER.EMAIL });
      </script>
      ...
      ...
     </head>
    </div>
  )
}

但是上面的方法好像不行。我在头盔内尝试了同样的方法，但没有成功。他们都显示

的错误

SyntaxError: Unexpected token

有什么方法可以在特定组件中加载此功能，还是必须在 index.html 中加载？

Answer 1

你好像对react的用途和使用方式有很大的误解

1) 页面上应该只有 1 个 head 元素，并且它应该在 index.html 中，而不是在组件的渲染输出中。

2) 让组件呈现 <script> 标签违背了使用 react 的要点。

您需要做的是import您需要的代码到您的组件中：

import './path/to/file.js'

然后 chmln 应该在 window 对象上可用

window.chmln.identify()

如何向 React 添加脚本函数

How can I add a script function to React

javascript

asynchronous

reactjs

react-helmet