React JS实现支持多面板独立展开的表格折叠面板问题

需求 #

• 点击表格头部行，显示对应的下一行数据
• 默认第一个面板处于展开状态
• 点击其他头部面板时，对应内容展开，且不关闭已展开的面板

现有代码问题 #

你当前用单个布尔值active控制所有面板的显示/隐藏，会导致点击任意头部时，所有面板同步切换状态，无法满足独立展开的需求。

改进后的代码 #

import { useState } from 'react';

const TableCollapse = () => {
  // 用Set存储展开的面板key，默认第一个面板（winfield）展开
  const [expandedPanels, setExpandedPanels] = useState(new Set(['winfield']));

  const handlePanelClick = (panelKey) => {
    setExpandedPanels(prev => {
      const newSet = new Set(prev);
      newSet.has(panelKey) ? newSet.delete(panelKey) : newSet.add(panelKey);
      return newSet;
    });
  };

  return (
    <div>
      <table className="table border">
        {/* Winfield 面板 */}
        <tr>
          <td colSpan={3} className="header" onClick={() => handlePanelClick('winfield')}>
            Winfield
          </td>
        </tr>
        {expandedPanels.has('winfield') && (
          <tr>
            <td>USJN - Tifton </td>
            <td>12 </td>
            <td> 800</td>
          </tr>
        )}

        {/* Helena 面板 */}
        <tr>
          <td colSpan={3} className="header" onClick={() => handlePanelClick('helena')}>
            Helena
          </td>
        </tr>
        {expandedPanels.has('helena') && (
          <tr>
            <td>USJN - Tifton USJN - Tifton USJN - Tifton USJN - Tifton </td>
            <td>12 </td>
            <td> 800</td>
          </tr>
        )}
      </table>
    </div>
  );
};

export default TableCollapse;

关键说明 #

• 用Set管理展开状态：每个面板对应唯一的key，可以独立控制每个面板的展开/收起，互不影响
• 默认展开第一个面板：初始化Set时加入第一个面板的key即可
• 点击逻辑：点击头部时切换对应key在Set中的存在状态，实现单个面板的独立控制
• 条件渲染：通过判断面板key是否在Set中，决定是否显示对应的内容行

你的原始代码 #

const [active, setActive] = useState(false);
const handleClick = () => {
  setActive(!active);
};
return (
  <div>
    <div>
      <table className="table border">
        <tr>
          <td colSpan={3} className="header" onClick={handleClick}>
            Winfield
          </td>
        </tr>
        {active && (
          <tr>
            <td>USJN - Tifton </td>
            <td>12 </td>
            <td> 800</td>
          </tr>
        )}

        <tr>
          <td colSpan={3} className="header" onClick={handleClick}>
            Helena
          </td>
        </tr>
        {active && (
          <tr>
            <td>USJN - Tifton USJN - Tifton USJN - Tifton USJN - Tifton </td>
            <td>12 </td>
            <td> 800</td>
          </tr>
        )}
      </table>
    </div>
  </div>
);

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