我正在制作一个Reddit克隆站点,使用Next.js进行服务器端渲染。一开始我没有使用Next.js,在了解它之后,我立即切换到了它。
我创建了一个自定义的
这是
我遇到的问题是,
我创建了一个自定义的
_app.js
文件,使得每个页面都存在头部和侧边栏,并将其作为最顶层的组件来保存应用状态。但后者并没有完全实现。这是
.project/src/pages/_app.js
的代码:import App, { Container } from 'next/app';
// Components
import Header from '../components/Header/Header';
const MainLayout = props => (
<React.Fragment>
<Header
isSidebarOpen={props.isSidebarOpen}
sidebarToggle={props.sidebarToggle}
/>
{props.children}
</React.Fragment>
);
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
state = {
isSidebarOpen: true
};
sidebarToggle = () => {
this.setState({ isSidebarOpen: !this.state.isSidebarOpen });
};
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<MainLayout
isSidebarOpen={this.state.isSidebarOpen}
sidebarToggle={this.sidebarToggle}
>
<Component {...pageProps} />
</MainLayout>
</Container>
);
}
}
我遇到的问题是,
isSidebarOpen
和sidebarToggle
被传递到了我需要它们的地方——它们出现在控制台中——但是onClick处理程序没有激活,如果我更改isSidebarOpen
,它不会立即生效,需要重新启动服务器。我以前使用Next.js时也使用过这种方法,并且可以正常工作。
我该如何实现我想做的事情?我已经阅读了文档,在Google和Stack Overflow上搜索了一番,甚至检查了他们存储库中的问题,但都没有运气。我怀疑这与自定义的_app.js
有关,因为属性被正确地传递下来了。