在React类组件中使用静态查询

Question

我试图在Gatsby的react类组件中使用静态查询。

import * as React from "react"
import '../styles/layout.scss'
import Layout from '../components/layout'
import { useStaticQuery, graphql } from 'gatsby'
import { container } from '../styles/mystyles.module.scss'
class IndexPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return  <Layout>
<div>
<h1 className={container}>hello </h1>
<div>This is my container</div>
</div>
</Layout>
}
}
const data = useStaticQuery(graphql`
query HeaderQuery {
site {
siteMetadata {
title
}
}
}
`)

export default IndexPage

我得到错误

19:14错误React Hook"；useStaticQuery"无法在顶级调用。React钩子必须在React函数组件或自定义React钩子函数React钩子/钩子规则中调用

这是否意味着这是不可能的，它必须是一个功能组件？

Answer 1

问题是，您试图在"顶级"(函数外(调用函数，而钩子只有在从函数组件内部调用时才起作用。例如：

const YourComponent = () => {
const data = useStaticQuery(yourQuery)
}

如果你不想使用函数组件，你仍然可以使用StaticQuery高阶组件：

export default (props) => 
<StaticQuery query={yourQuery}>
{({ data }) => <SomeComponent {...data} {...props} />}
</StaticQuery>

…或者像这样…

class SomeComponent extends React.Component {
render() {
return (
<StaticQuery query={yourQuery}>
{({ data }) => <div>{data.site.title}</div>}
</StaticQuery>
)
}
}