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没有以某种方式传递道具有关。

很明显，我对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;

将自定义文档用于样式化组件时，道具未传递

1 个答案: