ReactJS组件显示切换方法求助：开发ToDo列表遇实现问题

别用useRef直接操作DOM类名，React的核心是状态驱动UI，用状态管理控制组件显示隐藏才是符合React思想的正确做法，能避免你遇到的同步错误。

下面是具体实现步骤：

1. 父组件维护显示状态 #

在包含ri-menu-line图标的父组件里，用useState定义状态控制Action组件的显示：

import { useState } from 'react';
import Action from './Action';

function ParentComponent() {
  // 默认隐藏Action组件
  const [isActionVisible, setIsActionVisible] = useState(false);

  // 点击图标切换状态
  const toggleAction = () => {
    setIsActionVisible(prev => !prev);
  };

  return (
    <div>
      <i className="ri-menu-line" onClick={toggleAction}></i>
      {/* 将状态传给Action组件 */}
      <Action isVisible={isActionVisible} />
    </div>
  );
}

2. Action组件根据状态控制显示 #

有两种常用方式，按需选择：

方式一：条件渲染（组件按需挂载） #

如果不需要保留Action组件的状态（比如输入框内容），可以直接控制组件是否渲染：

function Action({ isVisible }) {
  if (!isVisible) return null;

  return (
    <section className="action-section">
      {/* 组件内容 */}
    </section>
  );
}

方式二：CSS类控制显示（组件始终挂载） #

如果需要保留组件内部状态，通过切换类名控制显示：

function Action({ isVisible }) {
  const sectionClass = isVisible ? 'action-section' : 'action-section hidden';

  return (
    <section className={sectionClass}>
      {/* 组件内容 */}
    </section>
  );
}

对应的CSS：

.hidden {
  display: none;
}

为什么用useRef会出错？ #

React的虚拟DOM会自动同步UI和状态，手动用useRef修改DOM类名会绕过这个机制，导致UI和状态不同步，组件重新渲染时手动修改的类名还可能被覆盖，引发各种难以排查的错误。状态驱动才是React的标准实践。

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