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

时间:2018-05-26 13:26:55

标签: javascript reactjs serverside-rendering serverside-javascript nextjs

我正在制作一个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>
    );
  }
}

我遇到的问题是,isSidebarOpensidebarToggle正在传递到我需要的地方 - 它们出现在控制台中 - 但是onClick处理程序并没有激活,如果我更改isSidebarOpen,则在重新启动服务器之前它不会生效。我在使用Next.js之前使用了这种方法,它按预期工作。

我怎样才能实现我想做的事情?我已经阅读了文档,搜索了Google和Stack Overflow。我甚至没有运气就检查了他们的回购问题。我怀疑它与自定义_app.js有关,因为道具正确传递下来。

1 个答案:

答案 0 :(得分:0)

一种可能是在您正在使用的组件中定义您的sidebarToggle函数。(也许是因为在Component内部调用它的代码可能在_app.js中而不是您的组件中运行,但这可能很大!但是值得一试)

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