Reactjs 使用Next.js静态生成：将页面道具传递给布局组件

我正试图对布局组件使用getStaticProps（如上所述），但对于我的具体情况，确实很难解决这个问题：

_app.tsx

const NoCheck: React.FC = ({ children }) => <>{children}</>

function App({ Component, pageProps }: AppProps) {
  const neoPage = Component as NeoPage
  const LayoutComponent = neoPage.Layout || Layout

  const { withAuthCheck = true } = neoPage

  const CheckAuthComponent = withAuthCheck ? CheckAuth : NoCheck

  return (
    <CommonProviders pageProps={pageProps} overmindConfig={config}>
      <CheckAuthComponent>
        <LayoutComponent>
          <Component {...pageProps} />
        </LayoutComponent>
      </CheckAuthComponent>
    </CommonProviders>
  )
}

export default App

---

所以布局有一个属性我想让getStaticProps传递。如何实现这一点？

从

getStaticProps

我想将另一个网页的状态传递给布局组件。我补充了更多细节above@juliomalves现在清楚了吗？我还不完全清楚。您希望在

getStaticProps

中访问什么特定值？您不能在该文件中声明/导入值并在

getStaticProps

中访问它吗？我的问题不是我想在

getStaticProps

中访问什么。问题是，如何将

systemNormal

从

getStaticProps

传递到

LayoutUnauthorized

此处：

Login.Layout=LayoutUnauthorized

？现在更清楚了。您可以从

App

中的

pageProps

访问

systemNormal

。您可以将其作为道具传递给

LayoutComponent

。

export const LayoutUnauthorized: React.FC<Props> = ({
  children,
  systemNormal,
}) => {
  return (
    <Flex>
      <SystemStatus systemNormal={systemNormal} />
      {children}
    </Flex>
  )
}

export const Login: NeoPage = () => {
  return (
    ...
  )
}

Login.Layout = LayoutUnauthorized
Login.withAuthCheck = false

export async function getStaticProps() {
  const res = await fetch("https://company.com")
  const systemNormal = await res.ok

  return {
    props: {
      systemNormal,
    },
    revalidate: 1,
  }
}