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

Question

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

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 Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks

这是否意味着不可能，必须是函数组件？

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>
    )
  }
}

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

Using a static query in a React class component

components

reactjs

gatsby