React项目使用react-helmet引入Microsoft Clarity脚本报错如何解决？

问题原因 #

报错和Clarity官方脚本本身无关，是JSX语法规则导致的：在JSX中写在<script>标签内部的代码里，{、}会被React识别为JS表达式插值占位符，而非普通JS代码字符，解析器读取到函数大括号时会认为语法不匹配，因此抛出缺失}的错误。

修复方案 #

方法1：使用dangerouslySetInnerHTML注入脚本 #

将完整脚本内容转为字符串传入dangerouslySetInnerHTML属性，可避免JSX解析大括号时的语法冲突，代码如下：

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

class siteAnalytics extends React.Component {
    render() {
        return (
            <div className="siteAnalytics">
                <Helmet>
                    <script 
                        type="text/javascript"
                        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");
                            `
                        }}
                    />
                </Helmet>
            </div>
        );
    }
};

export default siteAnalytics;

方法2：拆分脚本加载逻辑 #

也可以拆分成前置定义和外置脚本引入两部分，写法更简洁：

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

class siteAnalytics extends React.Component {
    render() {
        return (
            <div className="siteAnalytics">
                <Helmet>
                    <script 
                        dangerouslySetInnerHTML={{
                            __html: `window.clarity = window.clarity || function(){(clarity.q = clarity.q || []).push(arguments)};`
                        }}
                    />
                    <script async src="https://www.clarity.ms/tag/7ds6fq93fz" />
                </Helmet>
            </div>
        );
    }
};

export default siteAnalytics;

内容的提问来源于stack exchange，提问作者era s'q