[英]Props not being passed when using custom document for styled components
I'm trying to use styled components with next.js. 我正在尝试将样式化的组件与next.js一起使用。 I've added the babel plugin and added a custom _document.js
. 我添加了babel插件并添加了自定义_document.js
。 That all seems to be working fine. 一切似乎都正常。
However, when I try and use isomorphic-unfetch
to getInitialProps
into the page, the request returns data, but it doesn't make it into Props. 然而,当我尝试使用isomorphic-unfetch
到getInitialProps
到页面,请求返回数据,但它并没有使它成为道具。
For _document.js
I'm using the code from the next.js site here and have also tried a slightly different version from here which I also saw on the next.js docs site at some point. 对于_document.js
我使用从next.js网站的代码在这里和自己也尝试从一个稍微不同的版本, 在这里 ,我也看到了在某些时候next.js文档网站。
My test page looks like this (also from the next.js docs ): 我的测试页如下所示(也来自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>
)
}
}
I also have an _app.js
that looks like this: 我也有一个_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;
And Page.js
just has some styled components and a theme with a component that looks like this: Page.js
仅有一些样式化的组件以及一个主题,其主题如下所示:
class Page extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<StyledPage>
<GlobalStyle />
<Meta />
<Header />
{this.props.children}
</StyledPage>
</ThemeProvider>
);
}
}
export default Page;
I feel like it's something to do with the new _document.js or _app.js not passing the props down somehow. 我觉得这与新的_document.js或_app.js没有以某种方式传递道具有关。
Clearly I'm pretty new to next.js, so apologies if it's something stupid. 显然,我是next.js的新手,如果这很愚蠢,我深表歉意。 In the meantime, I'll keep plugging away to get a better understanding of what's going on. 在此期间,我将不断插手以更好地了解正在发生的事情。 I wanted to ask in parallel here since I'm under some time pressure for this project. 我想在这里并行询问,因为我在这个项目上承受着一些时间压力。
Many thanks for any thoughts you might have. 非常感谢您的任何想法。
Not long after posting, I worked out the issue. 发布后不久,我就解决了这个问题。 I guess posting on SO helps to understand the issue. 我想在SO上发布有助于理解该问题。
Essentially it was _app.js
which was the problem, not _document.js
as I had initially expected. 本质上是问题是_app.js
,而不是我最初预期的_document.js
。
I needed to add pageProps
to _app.js
so that they were propagated down to the page: 我需要将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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.