在React-Redux中如何为React Table的TbodyComponent添加额外属性？

云原生阿岚

2026-5-26

刚好我之前也做过类似的整合，给你分享一下具体的实现方法——核心就是利用React Table允许自定义组件的特性，重写它的TbodyComponent，用react-custom-scrollbars的Scrollbars组件把默认的tbody包裹起来，这样就能给表格的主体部分加上自定义滚动条了。

实现步骤与精简代码

首先导入所需的依赖模块：

import React from 'react'
import ReactTable from 'react-table'
import { ReactTableDefaults } from 'react-table'
import { Scrollbars } from 'react-custom-scrollbars'

接下来定义我们的自定义表格主体组件，用Scrollbars包裹默认的tbody，并传递所有必要的props：

// 自定义TableBody组件，整合Scrollbars
const TableBody = props => {
  return (
    <Scrollbars 
      // 这里可以根据需求添加Scrollbars的配置属性
      style={{ height: '400px' }} // 设置表格主体的固定高度
      autoHide // 滚动条自动隐藏
      // 还可以自定义滚动条样式，比如：
      // renderTrackVertical={props => <div {...props} style={{background: '#f0f0f0', width: '6px'}} />}
    >
      {/* 必须传递所有props给默认tbody，保证React Table的内部逻辑正常运行 */}
      <tbody {...props} />
    </Scrollbars>
  )
}

然后有两种方式让React Table使用这个自定义组件：

1. 全局生效（所有ReactTable实例都用这个自定义tbody）

// 覆盖React Table的默认TbodyComponent配置
Object.assign(ReactTableDefaults, {
  TbodyComponent: TableBody
})

2. 单个组件生效（仅指定的ReactTable使用）

const MyCustomTable = () => {
  const data = [/* 你的表格数据 */]
  const columns = [/* 你的列配置 */]

  return (
    <ReactTable
      data={data}
      columns={columns}
      TbodyComponent={TableBody} // 直接指定自定义组件
      // 其他React Table配置项
    />
  )
}