React可复用表格组件：点击行展示对应行详情的问题解决

问题说明 #

我实现了一个可复用表格组件，期望点击某一行时仅展开对应行的详情区域，但当前所有行的详情都处于默认可见状态。原本计划通过行id与选中行id匹配来控制显示逻辑，但未生效。

修复思路 #

核心是给详情行添加条件渲染逻辑，只有当当前行的id和选中行的id完全匹配时，才渲染该行的详情区域：

• 点击行时，将当前行的id存入状态（仅存id而非整个行对象，更高效）
• 对详情行增加判断：仅在选中行id === 当前行id时才渲染

修改后的完整代码 #

const TableCustm = ({ TableHeader, dataVal, selectedRowDetail }) => {
  // 存储选中行的id，而非整个row对象
  const [selectedTableRowId, setSelectedTableRowId] = useState(null);

  const data = dataVal.map((row) => {
    const rowData = [];
    const keys = Object.keys(row);
    keys.forEach((key, index) => {
      if (index !== 0) {
        rowData.push({
          key: TableHeader[index],
          val: row[key]
        });
      }
    });
    return (
      // 给列表项添加唯一key，符合React渲染规范
      <React.Fragment key={row.id}>
        <tr onClick={() => setSelectedTableRowId(row.id)}>
          {rowData.map((i) => (
            <td className="font-lato text-[14px] text-p_black font-semibold py-0" key={i.key}>
              <div className="d-flex py-2">{i.val}</div>
            </td>
          ))}
        </tr>

        {/* 条件渲染：仅选中行匹配时显示详情 */}
        {selectedTableRowId === row.id && (
          <tr>
            <td colspan={TableHeader.length}>
              <div style={{ background: "#dcdcdc", padding: "20px" }}>
                <button className="btn btn-primary">clickme</button>
                <hr className="my-2" />
                <div className="d-flex ">row detail for {row.id}</div>
              </div>
            </td>
          </tr>
        )}
      </React.Fragment>
    );
  });
  return (
    <Table responsive borderless>
      <thead>
        <tr>
          {TableHeader.map((item) => (
            <th key={item.id} className="font-normal">
              <div className="flex py-[15px]">{item.label}</div>
            </th>
          ))}
        </tr>
      </thead>
      <tbody className="border-0">{data}</tbody>
    </Table>
  );
};

关键修改点 #

• 将状态selectedTableRow改为selectedTableRowId，仅存储行id，简化匹配逻辑
• 给列表项添加key属性，避免React列表渲染警告
• 对详情行使用{selectedTableRowId === row.id && ...}实现条件渲染，精准控制显示
• 点击行时更新状态为当前行的id，触发对应详情的显示/隐藏

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