相关疑难解决方法(0)

Next.js - 如何使用文字 onload 属性字符串值在 <head> 内添加 <link> 标记?

在 Next.js 项目中,我希望获得一些初始 HTML,其中的内容完全相同<head>

<link href="..." rel="stylesheet" media="print" onload="this.media='all'" />
Run Code Online (Sandbox Code Playgroud)

我在 Next.js<Head>组件内的代码中包含以下内容:

{ /* @ts-ignore */ }
<link href="..." rel="stylesheet" media="print" onload="this.media='all'" />
Run Code Online (Sandbox Code Playgroud)

如果没有@ts-ignore它,它会说:

类型“DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>”上不存在属性“onload”。您指的是“onLoad”吗?TS(2322)

如果我使用onLoad而不是onload我得到:

类型“string”不可分配给类型“(event: SyntheticEvent<HTMLLinkElement, Event>) => void”。TS(2322)

问题是我得到的服务器端生成的 HTML 有:

<link href="..." rel="stylesheet" media="print" />
Run Code Online (Sandbox Code Playgroud)

只有当页面重新水化后,它才会更新为:

<link href="..." rel="stylesheet" media="all" onload="this.media='all'">
Run Code Online (Sandbox Code Playgroud)

我在 GitHub 上发现了这个问题,但它没有帮助,因为我没有使用 Google Fonts,而是使用 Typography.com,所以我无法使用next-google-fonts: https: //github.com/vercel/next.js/issues/ 12984

我正在考虑ref向该link标签添加 a 并使用 设置属性setAttribute,这希望也能在服务器端工作,但想知道是否有更简单的方法来做到这一点。

javascript head reactjs server-side-rendering next.js

7
推荐指数
1
解决办法
1万
查看次数