简短的回答：您不能。

Question

我正在Gatsby.js中开发一个带有博客的内部网站，并用于帖子布局，我正在用要由帖子作者设置的背景图片来编码此标头。我仍处于设计阶段，放置元素，空白文本等。

我已经使用BackgroundImage，graphQL和StaticQuery在其代码中制作了此组件，如果我缩小搜索范围为带有“ post_8.jpg”文本的gatsby-source-filesystem图像的搜索，它应该可以正常工作

sizeof(promoted_type) * CHAR_BIT

但是，我想知道如何将包含帖子的页面的前题中的值传递给该组件。

我一直在考虑使用传递给组件的值，例如import React from 'react' import { graphql, StaticQuery } from 'gatsby' import BackgroundImage from 'gatsby-background-image' import TextScramble from './TextScramble' const BackgroundDiv = ({ className, children }) => ( <StaticQuery query={graphql` query($post: String! ) { file(relativePath: {eq: "post_8.jpg"}) { childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } ` } render={data => { const imageData = data.file.childImageSharp.fluid return ( <BackgroundImage Tag="div" className={className} fluid={imageData} > <h1 className="bg-white shaddow shadow-md py-1 px-4 w-auto inline-block text-4xl absolute bottom-0 mb-24"><TextScramble>{ children }</TextScramble></h1> </BackgroundImage> )} } /> ) export default BackgroundDiv。例如：

postName

然后，它将在查询中以字符串形式获取此值。

const BackgroundDiv = ({ className, children, postName }) => (

我在上面做了一个简单的添加，但是没有用。编译告诉我失败

query={graphql`
      query($post: String! ) {
        file(relativePath: {eq: ${postName}}) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        }
      `
    }

我在Google上寻找字符串插值问题，甚至在这里结束，但我无法将这些内容与我的问题联系起来。我不是一个经验丰富的开发人员，所以我相信我缺少一些东西。对此问题的任何想法都将受到感激，就像我可以发布任何对代码的请求以帮助理解此问题一样。

提前谢谢！

Answer 1

简短的回答：您不能。

遵循有关github repo的讨论。如果您一直向下滚动，则看起来它将在接下来的几个版本中提供。

解决方法

查询所有数据。
过滤所需的特定数据。您可以在数组函数中使用变量。

这是我在项目中使用的SameSite=None;的实现方式

gatsby-image

编辑

在您的评论中，您在箭头函数的参数中犯了一个destructuring your props错误。这是您的修改后的代码：

const Page = (props) => {
  const { data: { allFile: { edges } } } = props;
  const oneImage = edges.filter(edge => // filter with your variable
    edge.node.childImageSharp.fluid.originalName === props.yourVARIABLE)[0].node.childImageSharp.fluid;
  {/* ... */}
}
export const query = graphql`
// ...

Answer 2

我遇到了类似的问题。幸运的是，我发现它可用于字符串插值：

// Option 1
$postName
const query1 = `file(relativePath: {eq: $postName}) { ... }`

// Option 2
${({postName})

const query2 = `file(relativePath: {eq: ${({postName})}) { ... }`

看看我用于一个项目的代码片段： https://github.com/timrodz/.com/blob/master/src/components/common/Button/index.js#L33

如何使用props字符串将值传递给StaticQuery？

2 个答案:

简短的回答：您不能。

解决方法

编辑