react 类组件 使用div实现antd中的table组件 固定头部效果,滚动高度自定义

实现方案
为了在 React 类组件中通过 div 实现 Ant Design 的表格固定表头效果并支持自定义滚动高度，可以按照以下方式设计：
1. 使用 Ref 获取 DOM 节点
可以通过 React.createRef() 创建一个引用对象，并将其绑定到包裹表格的 div 上。这样可以直接操作该节点的高度以及滚动事件。
class FixedHeaderTable extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
}

handleScroll = () => {
const { current } = this.divRef;
if (current.scrollTop + current.clientHeight >= current.scrollHeight) {
console.log('已到达底部');
}
};

render() {
return (
<div
ref={this.divRef}
style={{ overflowY: 'auto', height: `${this.props.scrollHeight}px` }}
onScroll={this.handleScroll}>
<Table {...this.props.tableProps} />
</div>
);
}
}
登录后复制
上述代码实现了以下几个功能：

创建 Ref：通过 React.createRef() 方法获取外部容器的引用[^1]。
监听滚动事件：当用户滚动时触发 handleScroll 函数，检测是否已经滚到底部。
动态设置高度：通过 style 属性中的 height 动态调整滚动区域的高度。

2. 表格固定头部实现
Ant Design 的 <Table /> 组件提供了内置属性 scroll 来控制表格的行为。如果希望实现固定的表头，则可以在传递给 <Table> 的 props 中加入如下配置：
<Table
scroll={{
y: this.props.scrollHeight,
}}
/>
登录后复制
此配置使得表格的内容部分能够垂直滚动，而表头保持静止[^2]。
需要注意的是，虽然 Ant Design 提供了这一特性，但它并不原生支持无限滚动的功能。因此需要手动处理滚动事件以模拟分页加载数据的效果。

3. 自定义滚动高度
为了让开发者灵活指定滚动区域的高度，可以通过父级组件向当前组件传入 scrollHeight 参数。例如：
<FixedHeaderTable
scrollHeight={400}
tableProps={{
columns: [...],
dataSource: [...],
}}
/>
登录后复制
在此基础上，还可以进一步优化用户体验，比如增加缓冲区距离（即未完全触底前就开始加载新数据），或者结合防抖机制减少频繁调用 API 请求的情况。

完整示例代码
以下是完整的类组件实现代码：
import React from 'react';
import { Table } from 'antd';

class FixedHeaderTable extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();

this.state = {
data: [],
loading: false,
};
}

componentDidMount() {
this.fetchData();
}

fetchData = async () => {
try {
this.setState({ loading: true });
// Simulate an API call to fetch more rows.
await new Promise((resolve) => setTimeout(resolve, 1000));
const newData = Array.from({ length: 10 }, (_, i) => ({
key: this.state.data.length + i,
name: `Name ${i}`,
age: Math.floor(Math.random() * 50),
}));
this.setState({
data: [...this.state.data, ...newData],
loading: false,
});
} catch (error) {
console.error(error);
this.setState({ loading: false });
}
};

handleScroll = () => {
const { current } = this.divRef;
if (!this.state.loading &amp;&amp; current.scrollTop + current.clientHeight >= current.scrollHeight - 100) {
this.fetchData();
}
};

render() {
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
];

return (
<div
ref={this.divRef}
style={{ overflowY: 'auto', height: `${this.props.scrollHeight}px`, border: '1px solid #ccc' }}
onScroll={this.handleScroll}>
<Table
bordered
rowKey="key"
pagination={false}
scroll={{ y: this.props.scrollHeight }}
columns={columns}
dataSource={this.state.data}
loading={this.state.loading}
/>
</div>
);
}
}

export default FixedHeaderTable;
登录后复制

注意事项

如果项目中有多个类似的场景需求，建议封装成通用组件以便复用。
对于函数式组件而言，无法直接使用字符串形式的 ref，而是推荐采用 useRef 钩子替代传统写法[^3]。