0

我是盖茨比的新手，一直在努力解决这个问题。我有一个组件，它遍历 .json 文件中的多个节点并显示图像和文本。

理想情况下，我想将来自页面组件上的 GraphQL 查询的数据传递给组件（称为 HeadlineAcross），然后让它在页面上显示某些元素。到目前为止，这是我的组件中的内容：

const HeadlineAcross = ( { headlineTitle } ) => {

const data = useStaticQuery(graphql`
query {
    allfeaturesJson{
        edges {
          node {
            img {
              childImageSharp {
                gatsbyImageData
              }
            }
            description
          }
        }
      }
    }           
`)

function getDetail(data) {
    const dataArray = []
    data.allfeaturesJson.edges.forEach((item) => {
        dataArray.push(
            <HeadlineAcrossRow>
                <HeadlineAcrossSingleImage>
                    <HeadlineAcrossImage image={getImage(item.node.img.childImageSharp.gatsbyImageData)}/>
                </HeadlineAcrossSingleImage>
                <HeadlineAcrossText>
                    <HeadlineAcrossHeading>{item.node.heading}</HeadlineAcrossHeading>
                    <p>{item.node.description}</p>
                </HeadlineAcrossText>
            </HeadlineAcrossRow>
        )
    })
    return dataArray
}

// return the elements here

}

我希望能够将此组件作为道具传递数据查询的结果，所以 {headlineTitle, data} 然后对其进行迭代。这是因为我可以以相同的方式格式化多个 Json 文件并轻松使用相同的组件。但要做到这一点，我需要引用如上所示的“allfeaturesJson”。我该怎么做呢？

4

0 回答 0