Next.js。 Layout中如何調用組件的getInitialProps

Question

我將頁眉組件添加到布局，但我不想為我想要使用 getInitialProps 的每個頁面將道具從布局發送到頁眉

布局.js

import Header from './header'
export default ({title}) => (
      <div>
        <Head>
          <title>{ title }</title>
          <meta charSet='utf-8' />
        </Head>

        <Header />

        {children}
      </div>
    )

header.js

export default class Header extends Component {
    static async getInitialProps () {
      const headerResponse = await fetch(someapi)
      return headerResponse;
    }
    render() {
        console.log({props: this.props})
        return (
            <div></div>
        );
    }
}

控制台：道具：{}

應用程序.js

  import Layout from './layout'
  import Page from './page'
  import axios from 'axios'

const app =  (props) => (
  <Layout >
    <Page {...props}/>
  </Layout>
)

app.getInitialProps = async function(){
  try {
    const response = await axios.get(someUrl)
    return response.data;

  } catch(e) {
    throw new Error(e);
  }
}

export default app

我想在 Header 組件中使用 get initial props 但它沒有觸發

Answer 1

編輯：2021 年這樣做的方式：

// with typescript remove type if you need a pure javascript solution
// _app.tsx or _app.jsx
import type { AppProps } from 'next/app';

import Layout from '../components/Layout';

export default function App({ Component, pageProps }: AppProps) {

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

// In order to pass props from your component you may need either `getStaticProps` or `getServerSideProps`.
// You should definitely not do that inside your `_app.tsx` to avoid rendering your whole app in SSR;
// Example for SSR
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

~~Next.js 使用 App 組件來初始化頁面。 您可以覆蓋它並控制頁面初始化。~~

~~您可以做的是，將您的邏輯放在_app覆蓋中並將其傳遞給您的子組件，例如使用Layout組件。~~

~~創建page/_app.js~~

import React from 'react'
import App, { Container } from 'next/app'

import Layout from '../components/Layout'

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}
    

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    /* your own logic */

    return { pageProps }
  }

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

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

~~github 上有一個來自 zeit 的好例子~~

Next.js。 Layout中如何調用組件的getInitialProps

問題描述

1 個解決方案

解決方案1
11 已采納 2018-12-06 18:41:40

Next.js。 Layout中如何調用組件的getInitialProps

問題描述

1 個解決方案

解決方案1 11 已采納 2018-12-06 18:41:40

解決方案1
11 已采納 2018-12-06 18:41:40