使用Next.js反应onClick事件处理程序不起作用

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，因为道具正确地传递了下来。

Answer 1

一种可能是定义您的sidebarToggle函数。（也许因为在组件内部调用它，代码可能在 _app.js 而不是您的组件中运行，这是一个很大的可能！但值得一试）

这_app.js是您的应用程序的包装器，我认为它不适合在最顶层的组件中用于保存状态。最好让一个简单的反应根组件来做到这一点！