expandedRowRender 不生效 (#1070)

* 🐞 fix(expandedRowClassName): #400

* 🧪 test(expandedRowClassName): 测试用例

Author: lqzhgood

docs/demo/expandedRowClassName.md

@@ -0,0 +1,8 @@
+---
+title: expandedRowClassName
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/expandedRowClassName.tsx"></code>

docs/examples/expandedRowClassName.module.less

@@ -0,0 +1,4 @@
+.tesExpandedRowClassName td {
+  background-color: red !important;
+  color: #fff;
+}

docs/examples/expandedRowClassName.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Table from 'rc-table';
+
+import styles from './expandedRowClassName.module.less';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+];
+
+const data = [
+  {
+    name: 'John',
+    age: '25',
+    address: '1 A Street',
+    children: [
+      { name: 'C-John', age: '31', address: '1 A Stree2t' },
+      {
+        name: 'C-Fred',
+        age: '532',
+        address: '2 B Str1eet',
+        children: [
+          { name: 'D-John', age: '31', address: '1 A Stree2t' },
+          { name: 'D-Fred', age: '532', address: '2 B Str1eet' },
+          { name: 'D-Anne', age: '43217', address: '3 C S3treet' },
+        ],
+      },
+      { name: 'C-Anne', age: '43217', address: '3 C S3treet' },
+    ],
+  },
+  { name: 'Fred', age: '38', address: '2 B Street' },
+  { name: 'Anne', age: '47', address: '3 C Street' },
+];
+
+const Demo = () => (
+  <div>
+    <h2>Table expandedRowClassName</h2>
+    <Table
+      rowKey={'name'}
+      columns={columns}
+      data={data}
+      expandable={{
+        expandedRowClassName: () => styles.tesExpandedRowClassName,
+      }}
+    />
+  </div>
+);
+
+export default Demo;

src/Body/BodyRow.tsx

@@ -124,6 +124,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     devRenderTimes(props);
   }
 
+  // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children
+  // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
+  const computedExpandedRowClassName =
+    expandedRowClassName && expandedRowClassName(record, index, indent);
+
   // ======================== Base tr row ========================
   const baseRowNode = (
     <RowComponent
@@ -134,6 +139,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
+        indent >= 1 ? computedExpandedRowClassName : '',
       )}
       style={{
         ...style,
@@ -179,8 +185,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   let expandRowNode: React.ReactElement;
   if (rowSupportExpand && (expandedRef.current || expanded)) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
-    const computedExpandedRowClassName =
-      expandedRowClassName && expandedRowClassName(record, index, indent);
+
     expandRowNode = (
       <ExpandedRow
         expanded={expanded}

tests/ExpandRow.spec.jsx

@@ -415,6 +415,24 @@ describe('Table.Expand', () => {
     expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy();
   });
 
+  it('renders expend row class correctly using children without expandedRowRender', () => {
+    const expandedRowClassName = vi.fn().mockReturnValue('expand-row-test-class-name');
+
+    const _data = [{ ...sampleData[0], children: [sampleData[1]] }];
+
+    const wrapper = mount(
+      createTable({
+        data: _data,
+        expandable: {
+          expandedRowKeys: [0],
+          expandedRowClassName,
+        },
+      }),
+    );
+
+    expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy();
+  });
+
   it('renders expend column title', () => {
     const wrapper = mount(
       createTable({