时间戳

首页 > 解决方案 > 在类组件中导入功能组件

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

标签： javascriptreactjsreact-hooks

解决方案

钩子规则

仅在顶层调用 Hooks

不要在循环、条件或嵌套函数中调用 Hook。相反，请始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是允许 React 在多个useState和useEffect调用之间正确保留 Hooks 状态的原因。（如果您好奇，我们将在下面深入解释。）

为了更好地理解检查这个https://reactjs.org/docs/hooks-rules.html

推荐阅读