S.M*_*ian 3 javascript next.js
我想将我的自定义类添加到某些页面。例如
所有页面都必须是此类，fixed-header此路由例外：
/cart/step-1
/login
此类添加或删除到 body 元素。
<body className="bg-gray fixed-header"
但我不知道如何处理这种情况？
在您的页面目录中创建自定义的_document.js和_app.js。
一个小实用程序，用于检查主体上是否存在类（以避免重复的类，感谢@juliomalves的建议）：
// ./utils/hasClasses
const hasClasses = () =>
document.body.classList.contains("bg-gray") &&
document.body.classList.contains("fixed-header");
export default hasClasses;
在 中_document.js，使用__NEXT_DATA__prop 访问当前页面，检查该页面是否在您允许的路由中，并将类添加到正文中。
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
// Add more routes here if you want to use the same classes
allowedRoutes = ["/login", "/cart/step-1"];
getColor() {
const { page } = this.props?.__NEXT_DATA__;
if (this.allowedRoutes.includes(page))
return "bg-gray fixed-header";
return "";
}
render() {
return (
<Html>
<Head />
<body className={this.getColor()}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
上面的代码总是在服务器上运行。类不会附加到客户端导航的正文中。
要解决上述问题，请在_app.jsa 中使用相同的逻辑useEffect，以便在客户端渲染时添加正确的类。
import { useEffect } from "react";
import { useRouter } from "next/router";
import "../styles.css";
import hasClasses from "./utils/hasClasses";
function MyApp({ Component, pageProps }) {
const { pathname: page } = useRouter();
const allowedRoutes = ["/login", "/cart/step-1"];
useEffect(() => {
if (!hasClasses() && allowedRoutes.includes(page))
document.body.className += "bg-gray fixed-header";
else if (hasClasses()) {
// Don't want the styles in other pages, remove if exists.
// Up to your implementation on how you want to handle this.
document.body.classList.remove("bg-gray");
document.body.classList.remove("fixed-header");
}
});
return <Component {...pageProps} />;
}
export default MyApp;
这解决了客户端导航在允许的路线上正确应用类的问题。中的代码_document.js确保当页面由服务器呈现时，它会被发送到下游并应用正确的类，这样就不会导致客户端上出现不正确的样式。
小智 5
最简单、最快的解决方案。将此代码添加到您想要在<body>.
useEffect( () => { document.querySelector("body").classList.add("bg-gray fixed-header") } );
| 归档时间： |
|
| 查看次数： |
4151 次 |
| 最近记录： |