javascript - 在GraphQL查询模板中使用React属性(字符串)

我正在Gatsby博客中制作一个可重用的组件，以转到博客文章的末尾，该文章采用文章的authorName，并呈现“关于作者”部分，从存储在网站其他地方的作者的个人资料中提取信息。

我已经制作了当authorName硬编码为字符串时可以工作的组件，但是我仍然坚持如何从文章组件（作为props.author传递）中将作者名获取到GraphQl查询中。

我可以确认：
1.正确编写道具作者，并且控制台记录正确
2.根据硬编码的字符串作者姓名，从团队的BIOS中提取了正确的生物学信息和个人资料图片。


  缺少的链接是用props.author替换硬编码的作者姓名字符串。


在此先感谢您的帮助;我已经审查了类似的问题，但找不到答案。

这是我的组件：

AboutAuthor.js

import React from "react";
import { StaticQuery, graphql } from "gatsby";
import Img from "gatsby-image";

export default (props) => (
  <div>
    <StaticQuery
      query={graphql`
        query {
          copy: markdownRemark(
            frontmatter: { name: { eq: "need to replace this string with props.author" } }
          ) {
            html
            frontmatter {
              name
              profileImage {
              childImageSharp {
                fluid(maxWidth: 800) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            }
          }
        }
      `}

      render={data => (
        <React.Fragment>
          <p>Testing Name: {props.author}</p> // testing the author name is passed ok, will be removed
          <Img
            fluid={data.copy.frontmatter.profileImage.childImageSharp.fluid}
            alt=""
          />
          <div>
            <span>
              {data.copy.frontmatter.name}
            </span>
            <div
              dangerouslySetInnerHTML={{ __html: data.copy.html }}
            />
          </div>
        </React.Fragment>
      )}
    />
  </div>
);

最佳答案

查看How StaticQuery differs from page query的文档


  StaticQuery可以执行页面查询可以执行的大多数操作，包括片段。主要区别在于：
  
  
  页面查询可以接受变量（通过pageContext），但只能添加到页面组件中
  StaticQuery不接受变量（因此名称为“ static”），但可以在任何组件（包括页面）中使用
  StaticQuery不适用于原始React.createElement调用；请使用JSX，例如<StaticQuery />