本文介绍如何在 react 中构建支持多行独立展开、默认首行开启的表格手风琴组件，通过封装可复用的 collapsiblerow 子组件管理各行列状态，避免全局单一 state 导致的联动问题。

本文介绍如何在 react 中构建支持多行独立展开、默认首行开启的表格手风琴组件，通过封装可复用的 collapsiblerow 子组件管理各行列状态，避免全局单一 state 导致的联动问题。

在 React 中实现表格手风琴（Table Accordion）时，关键挑战在于：每行标题需独立控制其下方内容的显隐状态，而非共享同一个 active 状态——否则点击任一行都会同步影响所有行，违背“多行可同时展开”的需求。

✅ 正确方案：组件化 + 局部状态

将每一组「标题行 + 内容行」抽象为一个独立组件 CollapsibleRow，每个实例持有自己的 isOpen 状态，并支持 defaultIsOpen 属性实现首行默认展开：

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

function CollapsibleRow({ data, defaultIsOpen = false, children }) {
  const [isOpen, setIsOpen] = useState(defaultIsOpen);

  return (
    <>
      <tr>
        <td colSpan={3} className="header" onClick={() => setIsOpen(!isOpen)}>
          {data}
        </td>
      </tr>
      {isOpen && children}
    </>
  );
}

? 注意：使用 ...>（Fragment）替代 <react.fragment></react.fragment> 可简化写法；colSpan={3} 假设表格为三列，可根据实际列数动态适配。

? 在主组件中使用

function App() {
  return (
    <div>
      <table className="table border">
        <tbody>
          {/* 首行默认展开 */}
          <CollapsibleRow data="Winfield" defaultIsOpen={true}>
            <tr>
              <td>USJN - Tifton</td>
              <td>12</td>
              <td>800</td>
            </tr>
          </CollapsibleRow>

          {/* 其他行默认收起 */}
          <CollapsibleRow data="Helena">
            <tr>
              <td>USJN - Tifton USJN - Tifton</td>
              <td>12</td>
              <td>800</td>
            </tr>
          </CollapsibleRow>

          <CollapsibleRow data="Phoenix">
            <tr>
              <td>USPHX - Phoenix</td>
              <td>24</td>
              <td>1250</td>
            </tr>
          </CollapsibleRow>
        </tbody>
      </table>
    </div>
  );
}

⚠️ 重要注意事项

• 必须包裹 <tbody>：HTML 表格规范要求 <code><tr> 必须位于 <code><tbody>、<code><thead> 或 <code><tfoot> 内，否则可能引发渲染异常或校验警告；<li> <strong>避免内联样式污染</strong>：推荐将 <code>.header { cursor: pointer; background-color: #f9f9f9; } 等样式提取至 CSS 文件，提升可维护性；
• 可扩展性增强建议：
  • 支持 onToggle 回调，便于父组件监听展开行为；
  • 使用 useId() 为每行生成唯一 ID，配合 aria-expanded 和 aria-controls 实现无障碍访问（a11y）；
  • 若数据量大，可结合 React.memo 对 CollapsibleRow 进行性能优化。

✅ 总结

通过将手风琴逻辑下沉至子组件并为每行维护独立状态，我们实现了真正解耦、可复用、符合语义的表格手风琴。它天然支持「多行并行展开」「首行默认激活」「响应式切换」三大核心需求，是 React 表格交互开发中的最佳实践之一。