如何在 React class 组件中使用 react-query？

Question

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

我是否必须在 React 函数语法中重写我的旧 class 组件，或者是否有使用 class 语法使用 react-query 的简单方法？

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

Answer 1

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

您可以：

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

Answer 2

使用渲染道具模式重新实现它非常容易。来自 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>

如何在 React class 组件中使用 react-query？

How can I use react-query in a React class component?

reactjs

react-query