Question

我知道钩子是类组件的对立面-不要误会我的意思，我只是不知道简单的代码行如何使此错误出现，以及我必须在该行中进行哪些更改它在类组件中工作。我得到了以下示例，该示例与out = tf.keras.layers.Add()([out, tf.pad(input_tensor, [[0,0],[0,0],[0,1]])])类型的文件和功能组件非常匹配。

Codesandbox example one

此代码只是在组件之间共享状态的简单方法。这样我们得到了文件.jsx，其中有我们的状态和一个简单的函数来更改该状态；那么我们有一个extendDiv文件，用于获取该状态并将其分发到我们的所有组件：global（filho）和son（pai）。在father中它可以正常工作，但是当我做完全相同的事情但在codesandbox example one中有一个类组件以及一些打字稿文件时，在以下代码中给我以下错误： / p>

App.jsx

您可以查看所有代码并在此处尝试：Codesandbox example two

在这里应该做些什么才能使其在类组件中工作？我已经尝试global.isDivExtended = extendDiv(); //Invalid hook call. Hooks can only be called inside of the body of a function component.进行全局操作，并使用bind ...非常感谢。

Answer 1

无法从类组件中调用反应挂钩。

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

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

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的未来。

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

1 个答案: