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

【问题标题】：React onClick event handler not working using Next.js使用 Next.js 反应 onClick 事件处理程序不起作用
【发布时间】：2019-08-16 23:23:04
【问题描述】：

我正在制作 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 有关，因为道具已正确传递。

【问题讨论】：

标签： javascript reactjs server-side-rendering serverside-javascript nextjs

【解决方案1】：

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

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

【讨论】：