reactjs - `getStaticProps` 填充页眉/页脚

Question

我正在 Next 中构建一个项目。目前，我有一个自定义 App 组件，它安装了页眉和页脚组件。

现在我想从 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 访问它。

组件/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 组件中执行相同的操作。

组件/Header.js

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