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

Question

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

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

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

Answer 1

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

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

Answer 2

官方的钩子（通常）只能在功能性 React 组件中使用。查看常见问题

你可以：

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