gpt4 book ai didi

reactjs - NextJs - 将 HTML Lang 属性添加到对象表示法中的自定义 _document

转载 作者:行者123 更新时间:2023-12-04 01:05:34 25 4
gpt4 key购买 nike

我想设置 <html lang="...">使用对象表示法在 NextJs 应用程序上标记。

我正在为 Styled-components 渲染一个 serverStylesheet,所以我当前的 _document文件看起来像这样:

class CustomDocument extends Document {
static getInitialProps = async (ctx) => {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;

try {
ctx.renderPage = () => originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});

const initialProps = await Document.getInitialProps(ctx);

return {
...initialProps,
styles: (
<>
{ initialProps.styles }
{ sheet.getStyleElement() }
</>
),
};
} finally {
sheet.seal();
}
}}

我看过很多关于如何渲染常规 JSX 组件的文章,但我想用对象表示法来完成。

最佳答案

您可以返回自定义 render()从那个允许你装饰的类中<html>lang你想要的属性。

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class CustomDocument extends Document {
static async getInitialProps(ctx) {
...
}

render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

这是您的完整代码:

import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class CustomDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;

try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});

const initialProps = await Document.getInitialProps(ctx);

return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}

render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

更多信息在这里 - Link to docs

All of <Html />, <Head />, <Main /> and <NextScript /> are required for page to be properly rendered.

关于reactjs - NextJs - 将 HTML Lang 属性添加到对象表示法中的自定义 _document,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57008211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com