代码之家 › 专栏 › 技术社区 › cssBlaster21895

如果显示单个帖子,如何检查内部布局?

gatsby reactjs

0

cssBlaster21895 · 技术社区 · 7 年前

若显示单个帖子,我将尝试在布局中渲染“后退”按钮。我已尝试在中传递创建页面上的pageContext属性 gatsby-node.js :

    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中的条件渲染,但我认为我可以这样做。

如何检查这是一篇文章,传递页面上下文(在哪里可以找到它),还是有更好的方法?

2 回复 | 直到 7 年前

1

Derek Nguyen 7 年前

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

1

Tom Jardine-McNamara 7 年前

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