在继承Component的React类组件中添加函数实现下拉按钮点击处理

• React Hooks 仅支持在函数组件、自定义Hook中调用，继承Component的类组件无法使用useState，需要用类组件专属的状态管理方案实现
• 你在类组件内部嵌套声明function Navbar()的写法属于语法错误，类组件的状态、事件回调需要按照类组件的规则定义

import { Component } from 'react';
import { Link } from 'react-router-dom'; // 用到Link需要提前引入对应依赖

export default class Navbar extends Component {
  // 初始化状态
  state = {
    click: false
  }

  // 点击事件回调，箭头函数会自动绑定this，避免上下文丢失
  handleClick = () => {
    this.setState(prevState => ({
      click: !prevState.click
    }))
  }
    
  render() {
    return (
        <nav className='dropdown'>
          <Link to='/' className='navbar-logo'>
                test button
          </Link>
           <div className='menu-icon' onClick={this.handleClick}>
            <i className={this.state.click ? 'fas fa-times' : 'fas fa-bars'} />
           </div>
        </nav>
    );
  }
}

• 移除了类内部错误的嵌套函数声明代码
• 用类组件专属的state属性初始化下拉状态，替代useState
• 点击事件用箭头函数定义为类属性，不需要手动绑定this就可以在render中正常调用
• 状态读取、事件绑定都需要加this.前缀访问类实例的属性和方法

如果你希望用useState实现需求，可以直接把组件改为函数组件，代码更简洁：

import { useState } from 'react';
import { Link } from 'react-router-dom';

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

  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>
  );
}

内容的提问来源于stack exchange，提问作者Trace Sheets