如何在Qwik的root.tsx中正确编写原生脚本？

问题原因 #

你之前的两种写法都受限于Qwik的JSX处理逻辑：

• 直接在<script>标签内写代码，Qwik的JSX编译器会将其识别为JSX表达式，导致编译失败；
• 用模板字符串插值的方式，JSX会自动转义特殊字符（比如=>中的>会被转成>），破坏脚本语法。

可行解决方案 #

方案1：使用Qwik客户端副作用钩子（推荐）

Qwik推荐通过useClientEffect$钩子在客户端执行代码，既符合框架的 hydration 逻辑，又能安全注册全局函数：

import { useClientEffect$ } from '@builder.io/qwik';

export default function Root() {
  useClientEffect$(() => {
    // 将函数挂载到window上成为全局方法
    (window as any).globalFunction = (parameter: any) => {
      console.log('hi');
    };
  });

  return (
    <html lang="en">
      <head>
        <title>Qwik App</title>
      </head>
      <body>
        {/* 页面内容 */}
      </body>
    </html>
  );
}

方案2：用dangerouslySetInnerHTML插入原生脚本

如果必须使用原生<script>标签，可通过dangerouslySetInnerHTML属性避免内容被转义：

export default function Root() {
  return (
    <html lang="en">
      <head>
        <title>Qwik App</title>
        <script
          dangerouslySetInnerHTML={{
            __html: `const globalFunction = (parameter) => console.log('hi')`
          }}
        />
      </head>
      <body>
        {/* 页面内容 */}
      </body>
    </html>
  );
}

内容的提问来源于stack exchange，提问作者Big boy