getStaticProps для заполнения верхнего / нижнего колонтитула страницы - PullRequest
Новая
       100

getStaticProps для заполнения верхнего / нижнего колонтитула страницы

1 голос
/ 26 мая 2020

Я создаю проект в Next. В настоящее время у меня есть настраиваемый компонент приложения, который монтирует компонент верхнего и нижнего колонтитула.

Теперь я хочу заполнить содержимое верхнего / нижнего колонтитула из API (во время сборки, поскольку оно не будет меняться очень часто) . Однако getStaticProps доступен только для страниц, но не для компонентов.

Как мне получить данные во время сборки и передать их компонентам верхнего / нижнего колонтитула?

1 Ответ

1 голос
/ 28 мая 2020

Предполагая, что App отображается на странице индекса внутри pages, вы просто передаете его в сток.

pages / index. js

import App from '../components/App'

const Index = ({data}) => {
  return(
    <div>
      <App data={data} />
    </div>
  )
}

export const getStaticProps = async () => {
  const res = await fetch('...')
  const data = await res.json()

  return { props: { data } } 
}

И затем в вашем компоненте приложения вы получаете доступ к нему, используя props.

components / App. js

import Header from './Header'
import Footer from './Footer'

const App = (props) => { // I believe you can also use {data} directly instead of props
  return(
    <div>
      <Header data={props.data} />
      <Footer data={props.data} />
    </div>
  )
}

И затем вы делаете то же самое в ваших компонентах Header и Footer.

компоненты / заголовок. js

const Header = ({data}) => {
  return(
    <div>
      {data}
    </div>
  )
}
...