微软清晰脚本在 React js 中抛出错误答案

【问题标题】：Microsoft clarity script throwing error in React js微软清晰脚本在 React js 中抛出错误
【发布时间】：2021-07-02 07:44:26
【问题描述】：

我尝试使用 Helmet 将 Microsoft clarity 脚本标签集成到我的反应网站中，但脚本标签引发错误。即使它是从 Microsoft 清晰度网站复制的。

 `<script type="text/javascript">    
  (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);
      t.async=1;
      t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];
      y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "7ds6fq93fz");
 </script>`


  `Parsing error: Unexpected token, expected "}"
9 | <script type="text/javascript">
10 |     (function(c,l,a,r,i,t,y){
11 | c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
| ^
12 | t=l.createElement(r);
13 | t.async=1;
14 | t.src="https://www.clarity.ms/tag/"+i;eslint
'}' expected.ts(1005)`

我的代码：

import React from "react";
import { Helmet } from "react-helmet";

class siteAnalytics extends React.Component {
    render() {
        return (
            <div className="siteAnalytics">
                <Helmet>
                    <script type="text/javascript">
                        (function(c,l,a,r,i,t,y){
                            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
                        t=l.createElement(r);
                        t.async=1;
                        t.src="https://www.clarity.ms/tag/"+i;
                        y=l.getElementsByTagName(r)[0];
                        y.parentNode.insertBefore(t,y);
            })(window, document, "clarity", "script", "7ds6fq93fz");
                    </script>
                </Helmet>
            </div>
        );
    }
};

export default siteAnalytics;

我做错了吗？还是脚本有问题？

【问题讨论】：

标签： javascript reactjs analytics clarity

【解决方案1】：

您不能直接在<script> 标记中编写javascript。
为此，您需要使用 React 的 dangerouslySetInnerHTML 属性。

<script
  dangerouslySetInnerHTML={{
    __html: `
        (function(c,l,a,r,i,t,y){
            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
            t=l.createElement(r);
            t.async=1;
            t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];
            y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "7ds6fq93fz");`,
  }}
/>;

【讨论】：