React点击按钮仅展开对应表格行详情的问题求助

嘿，很高兴能帮到你！这个问题在React表格开发里挺常见的——你现在应该是用了一个单一的布尔状态（比如isExpanded）来控制所有行的展开/收起，所以一点击按钮，所有行的状态都会同时变化，导致全部展开。咱们可以通过两种思路来修复：

方案一：用状态跟踪展开的行ID（推荐用于数据由父组件管理的场景） #

核心思路是：不再用统一的布尔值，而是用集合（或数组）存储当前展开的行的唯一ID，点击按钮时切换对应ID的存在状态，渲染时判断当前行ID是否在集合中。

代码示例： #

import { useState } from 'react';

function DataTable({ tableData }) {
  // 用Set存储展开的行ID，判断和操作都更高效
  const [expandedRowIds, setExpandedRowIds] = useState(new Set());

  // 切换指定行的展开状态
  const toggleRow = (rowId) => {
    setExpandedRowIds(prevState => {
      const updatedIds = new Set(prevState);
      if (updatedIds.has(rowId)) {
        updatedIds.delete(rowId); // 已展开则收起
      } else {
        updatedIds.add(rowId); // 未展开则展开
      }
      return updatedIds;
    });
  };

  return (
    <table border="1" cellPadding="8">
      <thead>
        <tr>
          <th>标题</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map(row => (
          // 用React.Fragment包裹主行和额外行，保证表格结构正确
          <React.Fragment key={row.id}>
            <tr>
              <td>{row.title}</td>
              <td>
                <button onClick={() => toggleRow(row.id)}>
                  {expandedRowIds.has(row.id) ? '收起详情' : '查看详情'}
                </button>
              </td>
            </tr>
            {/* 只有当前行ID在expandedRowIds里才渲染额外行 */}
            {expandedRowIds.has(row.id) && (
              <tr>
                <td colSpan="2">
                  <p>详细内容：{row.details}</p>
                  <p>其他信息：{row.extraInfo}</p>
                </td>
              </tr>
            )}
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

如果需要只允许展开一行（点击新行自动收起旧行），只需要把状态改成存储单个ID即可：

const [expandedRowId, setExpandedRowId] = useState(null);

const toggleRow = (rowId) => {
  setExpandedRowId(prevId => prevId === rowId ? null : rowId);
};

// 渲染时判断：
{expandedRowId === row.id && <tr>...</tr>}

方案二：将每行封装为独立组件，局部管理展开状态 #

如果表格行的逻辑比较复杂，把每行拆成独立组件会让代码更清晰——每个行组件自己维护isExpanded状态，互不干扰。

代码示例： #

// 独立的行组件
function TableRow({ rowData }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <React.Fragment key={rowData.id}>
      <tr>
        <td>{rowData.title}</td>
        <td>
          <button onClick={() => setIsExpanded(!isExpanded)}>
            {isExpanded ? '收起' : '展开'}
          </button>
        </td>
      </tr>
      {isExpanded && (
        <tr>
          <td colSpan="2">{rowData.details}</td>
        </tr>
      )}
    </React.Fragment>
  );
}

// 父表格组件
function DataTable({ tableData }) {
  return (
    <table border="1" cellPadding="8">
      <thead>
        <tr>
          <th>标题</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map(row => <TableRow rowData={row} />)}
      </tbody>
    </table>
  );
}

注意事项： #

• 务必用数据的唯一ID作为key（比如row.id），不要用数组索引，避免React渲染时出现异常。
• 额外行记得用colSpan属性合并列，保证表格结构的正确性。

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