Question

如果正在显示单个帖子，我正在尝试在布局中渲染后退按钮。我试图在gatsby-node.js的创建页面上传递pageContext属性：

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.fields.slug,
        component: blogPostTemplate,
        context: {singlePost:true}, // additional data can be passed via context
      })
    })

无论如何都无法在我的布局中访问此属性：

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

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

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 50,
          }}
        >
          <main>{children}</main>
          <footer>
            © {new Date().getFullYear()}, Built with <a href="https://www.gatsbyjs.org">Gatsby</a>
            {
              pageContext.singlePost
              `<a href="/">Back to all</a>`
             }
          </footer>
        </div>
      </>
    )}
  />
)

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

export default Layout

我对jsx中的条件渲染仍然不甚了解，但是我认为我可以这样做。

如何检查这是单篇文章，通过pageContext（在哪里找到它）还是有更好的方法？

Answer 1

您的条件渲染语法不太正确。在JSX中，花括号内的任何内容都只是一个常规JavaScript表达式，因此您需要这样的内容：

{ pageContext.singlePost && <a href="/">Back to all</a> }

Answer 2

pageContext将作为道具传递给您的blogPostTemplate。

// example

class BlogPostTemplate extends React.Component {
  render() {
    console.log(this.props.pageContext) // your page context
    return (...)
  }
}

如果您在博客文章模板中使用布局组件，则必须将上下文明确传递给它。

// example

class BlogPostTemplate extends React.Component {
  render() {
    return () {
      <Layout singlePost={this.props.pageContext.singlePost}> ... </Layout>
    }
  }
}

正如@ TomJardine-McNamara的答案所指出的那样，您的条件也不正确。遵循上面的示例，您可以在布局组件中作为道具访问singlePost。

const Layout = ({ children, singlePost }) => ( // extract `singlePost` from props
  ...
  { singlePost && <a href="" ... /> }
)

如何查看内部布局是否显示单个帖子？

2 个答案: