将函数插入到扩展 React 组件的文件中答案

【问题标题】：Inserting function into file that extends component in React将函数插入到扩展 React 组件的文件中
【发布时间】：2021-11-26 04:18:50
【问题描述】：

我正在尝试创建一个useState 来处理 React 中下拉按钮的点击；但是我不能在扩展组件的类下使用函数，所以我一直在努力将其更改为构造函数。我尝试了多种不同的方法，但这是原来的：

export default class Navbar extends Component {

function Navbar() { 
    const [click, setClick] = useState(false);
    const handleClick = () =>(!click);
}
    
  render() {
    return (
        <nav className='dropdown'>
          <Link to='/' className='navbar-logo'>
                test button
          </Link>
           <div className='menu-icon' onClick={handleClick}>
            <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
           </div>
        </nav>
    );
  
 }

【问题讨论】：

在您的应用中发生了什么，您希望它做些什么不同的事情？你做过调试吗？你的浏览器中是否安装了 React 开发工具？如果没有，请务必这样做并学习如何使用它们。它们是跟踪此类错误的非常有用的工具。

标签： reactjs function button setstate use-state

【解决方案1】：

您需要使用功能组件才能使用反应挂钩。然后使用setClick函数设置更新状态如下。

import React, { useState } from "react";

export default function Navbar() {
 
    const [click, setClick] = useState(false);
    const handleClick = () => setClick(value => !value);

    return (
        <nav className='dropdown'>
          <Link to='/' className='navbar-logo'>
                test button
          </Link>
           <div className='menu-icon' onClick={handleClick}>
            <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
           </div>
        </nav>
    );
  
  }

【讨论】：

谢谢！我想如果我取出扩展组件，我在这个中拥有的所有其他类名都行不通！也没有尝试取出渲染仍然是新的反应。
你可以在 react 中同时使用类和函数组件。请检查如何以两种方式使用状态管理。
如果这解决了您的问题，请接受它作为答案并投票。