Reactjs 如何访问react类组件中的GraphQL查询数据

我在

gatsby

的

/src/components

目录中有一个名为“Header”的

react组件，定义如下：

import React, { Component } from "react"
import { Link } from 'gatsby'
import { StaticQuery, graphql } from 'gatsby'
import Img from "gatsby-image"
import "./header.css"

class Header extends Component {

        constructor(props) {
            super(props);
        }

        render() {
            return(
                <Img fixed={data.file.childImageSharp.fixed} />
            )
        }
    }

    export default Header

    export const query = graphql`
      query {
        file(relativePath: { eq: "logo.png" }) {
          childImageSharp {
            # Specify the image processing specifications right in the query.
            # Makes it trivial to update as your page's design changes.
            fixed(width: 125, height: 125) {
              base64
            }
          }
        }
      }
    `

import React，{Component}来自“React”
从“盖茨比”导入{Link}
从“gatsby”导入{StaticQuery，graphql}
从“盖茨比图像”导入Img
导入“/header.css”
类头扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}
导出默认标题
export const query=graphql`
质疑{
文件（relativePath:{eq:“logo.png”}）{
childImageSharp{
#在查询中正确指定图像处理规范。
#使页面的设计更改时更新变得很简单。
固定（宽度：125，高度：125）{
base64
}
}
}
}
`

我尝试将
StaticQuery
与函数组件一起使用，但没有成功。所以，我想坚持使用类组件语法

在这里，查询在
http://localhost:8001/___graphql

如何访问
react
类组件中的查询数据？
只有页面组件文件才能导出
query
变量进行查询，如示例所示。参见盖茨比文件中的

下面是一个使用类组件的
StaticQuery
示例。您必须用功能组件包装类组件才能使其正常工作

从“React”导入React
从“gatsby”导入{graphql，StaticQuery}
类CoolThing扩展了React.Component{
渲染（）{
console.log（this.props）
返回(
{this.props.site.siteMetadata.title}
{/*有条件地呈现目录*/}
{this.props.directories.edges&&(

{this.props.directories.edges.map（（目录）=>{
return
{directory.node.name}
})}

)}
)
}
}
导出默认值（）=>(
(
)}
/>
)

关于这个话题

您也可以考虑使用.< /p> @ BeBaCHEM.YES并获得<代码> Type错误：无法读取未定义的ErrLogRe>代码>控制台的属性“文件”。我想你会发现数据道具中嵌套了这些信息。可能
this.props.data.file
我想。嘿@Valay，你必须对组件使用StaticQuery。在非页面组件中，盖茨比将忽略全局查询（如本例中使用的）。StaticQuery有什么问题？另外，如果它位于页面组件中，则需要从props获取它，因此
this.props.data.file…
就像@staypuftman指出的那样out@Derek阮：是的，你是对的。我使用了
StaticQuery
和{…props}，现在它工作正常。但还有另一个问题——因为我有一个功能组件，如何添加窗口滚动事件监听器。之前，我使用的是类组件，而窗口滚动在componentDidMount中运行良好。