如何在 React 类组件中使用 react-query？答案

【问题标题】：How can I use react-query in a React class component?如何在 React 类组件中使用 react-query？
【发布时间】：2021-01-07 09:04:40
【问题描述】：

我意识到：如果我想使用 hooks import { useQuery } from 'react-query' 我只能在 React 函数组件中这样做。

我是否必须在 React 函数语法中重写我的旧类组件，或者是否有一种简单的方法可以将 react-query 与类语法一起使用？

我确定它在某处有文档，但我只能找到使用 React 函数组件的教程。

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

使用渲染道具模式重新实现它非常容易。来自github discussion：

function UseQuery (props) {
  return props.children(useQuery(props.key, props.fn, props.options))
}
<UseQuery
  key=“todos”
  fn={() => getTodos()}
  options={{ staleTime: 5000 }}
>
  {query => {. . .}}
</UseQuery>

【讨论】：

【解决方案2】：

官方挂钩（通常）只能在功能性 React 组件中使用。 See FAQs

你可以：

重写你的组件（从长远来看，这可能是值得的……还有许多其他有趣的钩子库）
尝试将需要反应查询的代码隔离到功能性超级组件。这可能很难，但这取决于您的代码。请注意，钩子不是黑魔法，它们是一种模式，因此可以将它们用作 HOC（Google 中的“在类组件中使用钩子”，您会找到很多示例）。

【讨论】：