Реквизиты не передаются при использовании пользовательского документа для стилизованных компонентов - PullRequest
Новая
       36

Реквизиты не передаются при использовании пользовательского документа для стилизованных компонентов

0 голосов
/ 26 февраля 2019

Я пытаюсь использовать стилизованные компоненты с next.js.Я добавил плагин babel и добавил пользовательский _document.js.Кажется, что все работает нормально.

Однако, когда я пытаюсь использовать isomorphic-unfetch до getInitialProps на странице, запрос возвращает данные, но не переходит в Props.

Для _document.js IЯ использую код с сайта next.js здесь , а также попробовал немного отличную версию от here , которую я также видел на сайте документации next.js в какой-то момент.

Моя тестовая страница выглядит следующим образом (также из next.js docs ): 

import styled from 'styled-components';
import fetch from 'isomorphic-unfetch';

export default class MyPage extends React.Component {
    static async getInitialProps({ req }) {
        const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
        return { userAgent }
    }

    render() {

            return (
                <div>
                  Hello World {this.props.userAgent}
                </div>
              )
    }
}

У меня также есть _app.js, который выглядит следующим образом: 

import App, { Container } from 'next/app';
import Page from '../components/Page';

class MyApp extends App {
  render() {
    const { Component } = this.props;

    return (
      <Container>
        <Page>
          <Component />
        </Page>
      </Container>
    );
  }
}

export default MyApp;

И Page.js просто имеет несколько стилизованных компонентов и тему с компонентом, который выглядит следующим образом: 

class Page extends Component {
    render() {
        return (
            <ThemeProvider theme={theme}>
                <StyledPage>
                    <GlobalStyle />
                    <Meta />
                    <Header />
                    {this.props.children}
                </StyledPage>
            </ThemeProvider>
        );
    }
}

export default Page;

Я чувствую, что это как-то связано с новым _document.js или_app.js не передает реквизит как-то.

Очевидно, я довольно новичок в next.js, поэтому извиняюсь, если это что-то глупое.А пока я продолжу подключаться, чтобы лучше понять, что происходит.Я хотел бы спросить здесь параллельно, так как у меня есть некоторое время для этого проекта.

Большое спасибо за любые мысли, которые у вас могут возникнуть.

1 Ответ

0 голосов
/ 26 февраля 2019

Вскоре после публикации я решил проблему.Я думаю, что публикация на SO помогает понять проблему.

По сути, проблема была _app.js, а не _document.js, как я первоначально ожидал.

Мне нужно было добавить pageProps до _app.js, чтобы они распространялись вниз на страницу: 

import App, { Container } from 'next/app';
import Page from '../components/Page';

class MyApp extends App {

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Page>
          <Component {...pageProps} />
        </Page>
      </Container>
    );
  }
}

export default MyApp;
...