Question

我将React或Gatsby用于静态网站。子页面需要向主布局组件发送一个prop或一个变量（布尔），以确定我们是否显示Hero图像。

我在页面上得到了以下代码（简化）：

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

如何在may Layout.js中“获得”道具？
我用“”发送它，但我不知道如何获取该变量并使用它。

目前，Layout.js如下所示：

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

再次简化。

我试图对children.showHero进行测试，但我猜这不是正确的方法。
有提示吗？

Answer 1

您可以将其与孩子们一起解构：

if (colorAsString.length() == 4) { // #XXX
    colorAsString = colorAsString.replaceAll("#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])", "#$1$1$2$2$3$3");
}

int color = Color.parseColor(colorAsString);

请确保仅将const Layout = ({ children, showHero }) => (替换为children.showHero。

反应-向组件发送道具

1 个答案: