Реагировать на обработчик события 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 и переполнение стека. Я даже проверил проблемы их репо без удачи. Я подозреваю, что это как-то связано с обычаем _app.js, как реквизиты передаются правильно.

Answer 1

Одна из возможностей - определить ваш sidebarToggle функция внутри компонента, который вы используете.(Возможно, потому что, вызывая ее внутри Component, код может работать в _app.js вместо вашего компонента, это может быть большим! но стоит попробовать)

Вот _app.jsявляется оболочкой вашего приложения, и я не думаю, что она подходит для использования в самом верхнем компоненте для хранения состояния. Лучше сделать так, чтобы это делал простой компонент React root!