React onClick事件处理程序在使用Next.js时不起作用

Question

我正在制作一个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有关，因为属性被正确地传递下来了。

- Ibrahim

Answer 1

可能的一种方法是在你正在使用的组件内定义你的 sidebarToggle 函数。（也许因为在 Component 内调用它，代码可能在 _app.js 中运行，这只是一个大概率事件！但值得尝试）。

这里的 _app.js 是你应用程序的包装器，我认为它不适合用作最顶层的组件来保存状态。最好创建一个简单的 React 根组件来实现！

- Jacob