基本 Gatsby Shopify 示例缺少布局答案

【问题标题】：Basic Gatsby Shopify example missing Layouts基本 Gatsby Shopify 示例缺少布局
【发布时间】：2020-12-22 17:48:46
【问题描述】：

我正在使用基本的 Gatsby Shopify 网站模板https://www.gatsbyjs.com/docs/building-an-ecommerce-site-with-shopify/

我正在尝试启动并运行这个简单的示例，但我在以下代码块中注意到

/src/pages/products.js

import Layout from "../components/layout"

文章中没有提到组件或布局，应用程序在那里抛出错误。我只是想让一个基本的例子起作用。这段代码有github链接吗？

【问题讨论】：

标签： reactjs graphql shopify gatsby

【解决方案1】：

<Layout> 组件是大多数 Gatsby 启动器中的公共资源（例如 default one），如果您没有它，只需在 /components 文件夹下创建以下结构（以保持您的代码结构):

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.com/docs/use-static-query/
 */

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

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

  return (
    <>
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer style={{
          marginTop: `2rem`
        }}>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.com">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

如您所见，<Layout> 组件用children prop 包装了整个应用程序，使用时在所有应用程序之间共享一个<Header> 组件和一个<footer> 标签。

如果你不使用propTypes，你可以删除它们。

【讨论】：