如何在反应类组件中使用 graphql useStaticQuery答案

【问题标题】：How to use graphql useStaticQuery in a react class component如何在反应类组件中使用 graphql useStaticQuery
【发布时间】：2020-02-13 03:31:15
【问题描述】：

如何在 react 类组件类中使用 react 的 useStaticQuery。我见过很多使用 React 函数式组件的例子，但我很想知道它是如何在类组件中完成的，因为我更喜欢编写类组件。

我想把这样的东西转换成一个作为类实现的反应组件。

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title}/>
      <Home/>
      <AboutMe/>

    </>
  )
}

【问题讨论】：

钩子不能在类组件中使用。请改用StaticQuery。

标签： reactjs graphql

【解决方案1】：

只需使用 StaticQuery 组件并将其包裹在您要呈现的部分周围。

对此有明确的文档，请查看：https://www.gatsbyjs.org/docs/static-query/

在你的情况下，它可能看起来像这样：

const Layout = ({ children }) => {
  const query = graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `;

  return (
    <StaticQuery query={query}>
      {({ loading, error, data }) => {
        <>
          <Header siteTitle={data.site.siteMetadata.title} />
          <Home />
          <AboutMe />
        </>;
      }}
    </StaticQuery>
  );
};

【讨论】：