Reactjs 如何在react类组件中使用graphql useStaticQuery

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

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

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

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

    </>
  )
}

const布局=（{children}）=>{
常量数据=useStaticQuery（graphql`
查询站点标题查询{
场地{
站点元数据{
标题
}
}
}
`)
返回(
)
}

只需使用StaticQuery组件并将其环绕在要渲染的部分上即可

对此有明确的文档，请查看：

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

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

const布局=（{children}）=>{
const query=graphql`
查询站点标题查询{
场地{
站点元数据{
标题
}
}
}
`;
返回(
{（{加载，错误，数据}）=>{
;
}}
);
};

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

StaticQuery

。