在_app.js (nextjs)中接收新的道具,可以通过使用Next.js提供的getInitialProps方法来实现。getInitialProps是Next.js中的一个特殊方法,它可以在服务器端和客户端都被调用,用于获取页面初始化所需的数据。
首先,在_app.js文件中引入getInitialProps方法:
import App from 'next/app';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
// 在这里可以获取到传递的道具
const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
export default MyApp;
然后,在每个页面组件中,可以通过定义静态方法getInitialProps来接收新的道具:
import React from 'react';
class MyPage extends React.Component {
static async getInitialProps({ query }) {
// 在这里可以获取到传递的道具
const { id } = query;
// 返回道具对象
return { id };
}
render() {
const { id } = this.props;
return <div>接收到的道具:{id}</div>;
}
}
export default MyPage;
在上面的例子中,我们在MyPage组件中定义了getInitialProps方法,通过参数query获取到传递的道具,并将其作为道具对象返回。然后在组件的render方法中,可以通过this.props获取到接收到的道具。
这样,在_app.js中使用getInitialProps方法,可以在服务器端和客户端都接收到新的道具,并将其传递给对应的页面组件。根据具体的业务需求,可以在getInitialProps方法中进行数据的获取、处理等操作。
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)和腾讯云云函数(https://cloud.tencent.com/product/scf)。
云+社区沙龙online[数据工匠]
高校公开课
腾讯数字政务云端系列直播
TVP技术夜未眠
云+社区技术沙龙[第6期]
领取专属 10元无门槛券
手把手带您无忧上云