如何在React中不使用jQuery实现下拉菜单图标文本切换

先说说你代码里的两个核心问题：

1. 条件判断用了赋值符号=而非比较符号===，导致每次点击都会强制把文本设为'V'，条件永远为真，只会触发改成'O'的逻辑，根本切不回'V'。
2. 直接操作DOM不符合React的设计思路——React是数据驱动视图，应该用状态控制UI变化，而非手动修改元素内容。

下面是正确的实现方案，用React状态管理来完成：

函数组件实现（推荐） #

import { useState } from 'react';

function NavMenu() {
  // 用state管理下拉菜单的展开状态，初始为关闭（显示'V'）
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const toggleDropdown = () => {
    // 点击时切换状态，同时可以在这里加入下拉菜单展开/关闭的逻辑
    setIsDropdownOpen(!isDropdownOpen);
  };

  return (
    <div id="container">
      <h1 id="logo">Logo</h1>
      <h1 id="navitem1">Menu option1</h1>
      <h1 id="navitem2">Menu option2</h1>
      <h1 id="navitem3">Menu option3</h1>
      {/* 根据状态动态显示对应的文本 */}
      <h1 id="dropdown" onClick={toggleDropdown}>
        {isDropdownOpen ? 'O' : 'V'}
      </h1>
    </div>
  );
}

export default NavMenu;

为什么要这么写？ #

• 用useState维护状态，React会自动根据状态变化更新UI，无需手动操作DOM，避免了DOM操作带来的潜在问题。
• 切换逻辑清晰，!isDropdownOpen直接取反状态，一次点击就能完成打开/关闭的切换。
• 文本显示和下拉菜单的展开状态完全同步，不会出现状态不一致的情况。

如果非要保留原DOM操作的方式（不推荐），至少要修正条件判断并补充else分支：

const DropDown = () => {
  const dropdownEl = document.getElementById('dropdown');
  if (dropdownEl.innerText === 'V'){
    dropdownEl.innerText = 'O';
  } else {
    dropdownEl.innerText = 'V';
  }
}

但还是强烈建议用React状态管理的方式，这才是React的标准用法。

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