个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我是 Typescript 的初学者。我正在处理 Next.js TypeScript 项目。基本上，我要做的是通过 body 标记将服务器端的 userCurrency 值传递给客户端。我正在处理 _document.tsx 文件。问题是我遇到了这个错误
我从错误消息中了解到 userCurrency 在 DocumentInitialProps 上不存在，引用其他 Stack Overflow 帖子我正在尝试扩展/添加额外的属性 userCurrency 到 DocumentInitialProps。
如您所见，我创建了 NewDocumentInitialProps。但是，错误仍然存在。我究竟做错了什么？如何将自定义属性添加到 DocumentInitialProps？
import { Fragment } from "react";
import Document, {
DocumentContext,
Html,
Head,
Main,
NextScript,
DocumentInitialProps,
} from "next/document";
declare type NewDocumentInitialProps = DocumentInitialProps & {
userCurrency?: string;
};
export default class CustomDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise<NewDocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
...{ userCurrency: "USD" },
};
}
render(): JSX.Element {
return (
<Html>
<Head>
{
<>
<link rel="icon" href="/favicon_dev.svg" type="image/svg+xml" />
</>
}
</Head>
<body data-currency={this.props.userCurrency}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
最佳答案
仅输入 getInitialProps 的返回类型不足以在 render 函数中正确输入 this.props。在声明类时，您需要将 NewDocumentInitialProps 作为泛型传递给扩展的 Document 类型。
type NewDocumentInitialProps = DocumentInitialProps & {
userCurrency?: string;
};
export default class CustomDocument extends Document<NewDocumentInitialProps> {
//...
}
这也将正确键入 getInitialProps 的返回类型，因此您不必自己明确地执行此操作。
关于reactjs - 如何在 _document 中添加自定义属性和扩展 DocumentInitialProps 类型？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70514762/
25
4
0
我是 Typescript 的初学者。我正在处理 Next.js TypeScript 项目。基本上，我要做的是通过 body 标记将服务器端的 userCurrency 值传递给客户端。我正在处理
我是一名优秀的程序员,十分优秀！