Question

我正在Next中建立一个项目。当前，我有一个自定义的App组件，该组件安装了Header和Footer组件。

现在，我想从API填充页眉/页脚的内容（在构建时，因为它不会经常更改）。但是，getStaticProps仅适用于页面，不适用于组件。

如何在构建时获取数据并将其传递给页眉/页脚组件？

Answer 1

假设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 } } 
}

然后在您的App组件中使用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组件中执行相同的操作。

components / Header.js

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

getStaticProps填充页面的页眉/页脚

1 个答案: