时间戳

首页 > 解决方案 > 尝试部署我的 Gatsby 站点时收到“props.children 不是函数”错误

reactjs - 尝试部署我的 Gatsby 站点时收到“props.children 不是函数”错误

问题描述

一直在阅读有关此问题的其他帖子，但无法弄清楚。在我的开发版本中一切正常，但 Netlify 在我尝试部署时抛出此错误：

4:58:48 PM:   WebpackError: TypeError: props.children is not a function
4:58:48 PM:   
4:58:48 PM:   - layout.js:90 
4:58:48 PM:     src/components/layout.js:90:20

我的布局组件：

const Layout = props => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  ...

  const globals = {
    about: about,
    menu: menu,
    closeMenu: () => toggleMenu(false),
    song: song,
    handleSongChange: handleSongChange,
    videoLoop: videoLoop,
  }

  return (
    <>
      <Header
        siteTitle={data.site.siteMetadata?.title || `Title`}
      />
      <main>{props.children({ ...props, ...globals })}</main>
      <Footer />
    </>
  )
}

export default Layout

在我的索引页面中使用布局：

const IndexPage = () => {
  return (
    ...
    <Layout>
      {props => (
        <>
          //using props.menu, props.about, etc here
        </>
      )}
    </Layout>
  )
}

export default IndexPage

标签： reactjsgatsbynetlify

解决方案

听起来你有一个页面正在做这样的事情：

<Layout>Hi</Layout>

或这个：

<Layout />

在开发中，Gatsby 只为您提供您正在查看的页面。当您运行时gatsby build，它将评估它正在构建的每个页面的代码，这很可能是您在构建时发现问题而不是在开发中发现问题的原因。

不过，您可能真的不打算为Layout组件使用子功能配置。

推荐阅读