表格行展开时如何让展开行与对应父行保持相同背景色

你目前使用的:nth-child(odd/even)选择器是按照DOM节点中所有<tr>的排列顺序计算奇偶，展开行插入后会打乱原有行的序号，导致颜色匹配错误。

推荐两种可行方案，按需选择即可：

方案1：多tbody分组（改动最小） #

HTML表格支持多个<tbody>标签，你可以把每一组「父行+对应的展开行」包裹在同一个<tbody>里，然后按tbody的奇偶设置背景色，同一tbody下的所有行自动共用同一种背景色。

调整渲染逻辑 #

{/* 遍历数据时每组行包裹一个tbody */}
{originalData.map((item, i) => (
  <tbody key={i}>
    {/* 原有普通数据行tr */}
    <tr>
      {/* 原有单元格内容，包括展开按钮 */}
      <td>
        <USBButton
          type="button"
          iconColor="default"
          ariaLabel="expand"
          addClasses="expandButton"
          id={`expand-collapse_btn-${i}`}
          name="expandcollapse"
          variant="naked"
          size="small"
          handleclick={(e) => onExpandHandler(i)}
        >
          {expandedRows.includes(i) ? <USBIconChevronlp /> : <USBIconChevronDown />}
        </USBButton>
      </td>
      {/* 其他普通单元格 */}
    </tr>
    {/* 展开行逻辑不变，和父行同属一个tbody */}
    {expandedRows.includes(i) && (
      <tr className={`table-row-default table-row-${i}`}>
        <td colspan={columnData.length + 1}>
          {dataExpand[i]}
        </td>
      </tr>
    )}
  </tbody>
))}

调整CSS样式 #

tbody:nth-child(odd) tr {
  background: gray;
}
tbody:nth-child(even) tr {
  background: white;
}

直接删掉原来针对tr的nth-child样式即可。

方案2：按原始数据下标加类（兼容性最强） #

直接根据原始数据的下标奇偶给父行和对应的展开行加相同的背景类，完全不受DOM节点顺序影响。

调整渲染逻辑 #

给普通行和展开行都加上同名下标奇偶类：

{/* 普通数据行加类 */}
<tr className={`${i % 2 === 0 ? 'row-odd' : 'row-even'}`}>
  {/* 单元格内容 */}
</tr>

{/* 展开行加和父行一样的类 */}
<tr className={`table-row-default table-row-${i} ${i % 2 === 0 ? 'row-odd' : 'row-even'}`}>
  <td colspan={columnData.length + 1}>
    {dataExpand[i]}
  </td>
</tr>

调整CSS样式 #

.row-odd {
  background: gray;
}
.row-even {
  background: white;
}

同样删掉原来针对tr的nth-child样式。

你原有展开事件处理函数里存在状态直接引用的问题，建议修改为拷贝后更新，避免状态更新异常：

const onExpandHandler = (i) => {
  const isRowExpanded = expandedRows.includes(i)
  const newExpandedRows = isRowExpanded ? 
    expandedRows.filter(index => index !== i) : 
    [...expandedRows, i];
  setExpandedRows(newExpandedRows);
};

同时注意你原代码里newExpanded Rows的空格是笔误，需要删掉。

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