React - 无效的钩子调用和类组件

Question

我知道钩子是类组件的对立面——不要误会我的意思，我只是不知道一行简单的代码如何使这个错误出现，以及我必须在该行中做出什么改变它在类组件中工作。我得到了以下示例，它非常适用于 .jsx 类型的文件和功能组件。

Codesandbox example one

此代码只是在组件之间共享状态的一种简单方式。所以我们得到了文件extendDiv，其中我们有我们的状态和一个简单的函数来改变那个状态；然后我们有一个global 文件，用于获取该状态并将其分发给我们所有的组件：son (filho) 和father (pai)。 在codesandbox example one 中它工作得很好，但是当我做完全相同的事情但使用App.jsx 中的类组件和一些打字稿文件时，它在以下代码中给了我以下错误：

global.isDivExtended = extendDiv();
//Invalid hook call. Hooks can only be called inside of the body of a function component.

您可以在这里查看所有代码并尝试一下：Codesandbox example two

我应该在这里做什么才能使它在类组件中工作？我已经尝试过bind 全局并使用this...非常感谢。

Answer 1

不能从类组件中调用 React 钩子。

您可以将所述类组件转换为函数组件，或者将其保留为类组件并以良好的类组件方式管理状态。最好转换成函数。

沙盒似乎没有所有文件，所以我不能确定，但​​我相信这可能有效：

import * as React from "react";
import "./styles.css";
import Father from "../src/components/father";
import global from "./global";
import extendDiv from "./extendDiv";

function App(props) {
  let [dateVar, setDateVar] = React.useState({ date: new Date() })
  global.isDivExtended = extendDiv();

  return (
      <>
        <Father></Father>
      </>
  )
}

export default App;

或者，您可以为您的钩子编写一个高阶组件包装器，以便您可以将钩子的逻辑作为道具传递给您的类组件as explained here。但是，如果可能的话，我建议避免它；它很混乱，更难测试。函数组件的编写（和阅读）更有趣，而且它们似乎是 React 的未来。