javascript — использовать React prop (string) в шаблоне запросов GraphQL

Используйте React prop (string) в шаблоне запросов GraphQL

Я делаю повторно используемый компонент в блоге Гэтсби, чтобы перейти к концу статей блога, в котором берется authorName статьи и отображается раздел «Об авторе», извлекающий информацию из биографии автора, хранящейся в другом месте на сайте.

Я сделал компонент, который работает, когда authorName жестко запрограммирован как строка, но я застрял в том, как получить имя автора из компонента статьи (переданного как props.author) в запрос GraphQl.

Я могу подтвердить, что: 1. Автор пропускается правильно, а консоль записывает точно правильно. 2. Правильная информация и изображение профиля извлекаются из командного биоса в соответствии с именем автора в жестко закодированной строке.

Отсутствующая ссылка — заменить строку имени автора в жестком коде на props.author.

Заранее спасибо за вашу помощь; Я рассмотрел похожие вопросы и не могу найти ответ.

Это мой компонент:

AboutAuthor.js

 import React from "react"; import { StaticQuery, graphql } from "gatsby"; import Img from "gatsby-image"; export default (props) ={amp}gt; ( {amp}lt;div{amp}gt; {amp}lt;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 ={amp}gt; ( {amp}lt;React.Fragment{amp}gt; {amp}lt;p{amp}gt;Testing Name: {props.author}{amp}lt;/p{amp}gt; // testing the author name is passed ok, will be removed {amp}lt;Img fluid={data.copy.frontmatter.profileImage.childImageSharp.fluid} alt="javascript - использовать React prop (string) в шаблоне запросов GraphQL" /{amp}gt; {amp}lt;div{amp}gt; {amp}lt;span{amp}gt; {data.copy.frontmatter.name} {amp}lt;/span{amp}gt; {amp}lt;div dangerouslySetInnerHTML={{ __html: data.copy.html }} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/React.Fragment{amp}gt; )} /{amp}gt; {amp}lt;/div{amp}gt; ); 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector