javascript - 对样式化组件使用自定义文档时未传递 Prop

Question

我正在尝试将带样式的组件与 next.js 一起使用。我添加了 babel 插件并添加了自定义 _document.js。这一切似乎工作正常。

但是，当我尝试使用 isomorphic-unfetch 将 getInitialProps 放入页面时，请求会返回数据，但不会将其放入 Props。

对于 _document.js，我使用的代码来自 next.js 站点 here并且还尝试了与 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 没有以某种方式传递 Prop 有关。

很明显，我对 next.js 还很陌生，如果有什么愚蠢的地方，我深表歉意。与此同时，我会继续努力以更好地了解正在发生的事情。我想在这里并行提问，因为我在这个元素上有一些时间压力。

非常感谢您的任何想法。

Answer 1

发布后不久，我解决了这个问题。我想在 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;