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

如何解决微软清晰脚本在 React js 中抛出错误

我尝试使用 Microsoft clarity 在我的 React 网站中集成 Helmet 脚本标签，但脚本标签引发错误。即使它是从 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,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,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,"7ds6fq93fz");
                    </script>
                </Helmet>
            </div>
        );
    }
};

export default siteAnalytics;

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

解决方法

您不能直接在 <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");`,}}
/>;