反应-向组件发送道具

Question

I'm using React or Gatsby for a static website. A subpages need to send an prop or a variable(bool) to the main layout component, to determinme if we show a Hero image or not.

I got the following code (simplified) for the page:

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'

import dividerIcon from '../images/hair-cut-tool.svg'

const IndexPage = ({ data }) => (
  <Layout showHero={true}>
    <div className="divider-wrapper">
      <div className="divider">
        <img alt="divider" src={dividerIcon} />
      </div>
    </div>
  </Layout>
)

export default IndexPage

How can I "get" the prop in may Layout.js?
I'm sending it with "" but I have no idea, how to get this variable and use it.

As for right now the Layout.js looks like this:

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
        heroImgLogo: file(relativePath: { eq: "logo.png" }) {
            childImageSharp {
                fixed(width: 300) {
                    ...GatsbyImageSharpFixed_withWebp_noBase64
                }
            }
        }
      }
    `}
    render={data => (
      <>
        <div className="site">
          {(children.showHero) ? 
            <Hero logoImg={data.heroImgLogo.childImageSharp.fixed} />
            : 
          null }

          <div className="site-content container">{children}</div>
        </div>
      </>
    )}
  />
);

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

export default Layout  

yet again, simplified.

I tried to children.showHero but it wasn't the right approach, I guess.
Any hints?

Answer 1

You can destructure it alongside children:

const Layout = ({ children, showHero }) => (

Be sure to replace children.showHero with just showHero .