Question

一直在阅读有关此问题的其他帖子，但一直无法弄清楚。在我的开发版本中一切正常，但是当我尝试部署时 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

Answer 1

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

<Layout>Hi</Layout>

或者这个：

<Layout />

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

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

尝试部署我的 Gatsby 站点时收到“props.children is not a function”错误

1 个答案: