Javascript 在类组件中导入功能组件

我已经创建了一个基于钩子的函数组件，并试图在基于类的组件中导入该函数组件，但我得到以下错误

功能部件代码：-

import React, { useState } from "react";

const SearchBar = () => {
  const [searchBtn, setSearchBtn] = useState(false);

  return (
    <div className="search-bar">
      <input className="search-text" type="text" placeholder="Search..." />
      {searchBtn ? (
        <button
          title="Back"
          onClick={() => setSearchBtn(false)}
          className="search-btn "
        />
      ) : (
        <button
          title="Search"
          onClick={() => setSearchBtn(true)}
          className="search-btn "
        />
      )}
    </div>
  );
};

export default SearchBar;

我使用的是react dom版本：16.8.6

只在顶层调用钩子

不要在循环、条件或嵌套函数中调用钩子。相反，总是在React函数的顶层使用钩子。通过遵循此规则，可以确保每次呈现组件时都以相同的顺序调用挂钩。这就是允许React在多个useState和useEffect调用之间正确保留挂钩状态的原因。如果您感到好奇，我们将在下面对此进行深入解释

---

为了更好地理解，请检查此项

您的组件没有任何问题。最常见的错误情况是使用某些第三方组件，该组件期望函数呈现某些内容，并将其作为函数而不是react组件调用：

// how you expect it to be called
<SearchBar />
...
// how it is actually called
{SearchBar()}

---

如果是这种情况，请将其从someProp={SearchBar}更改为someProp={=>}

我已经正确地编写了钩子，在类中导入钩子组件时出错component@bajran您正在类组件内使用钩子组件，这是不推荐的。最好使用功能组件并处理从父组件到子组件的函数。您能告诉我为什么不建议使用功能组件吗？您能说明如何在类组件中导入此功能组件吗？