如何在父组件中获取封装的react-table组件内部state.filters数组

以下两种实现方式均可满足需求：

方案1：使用react-table受控模式（推荐） #

该方案符合React单向数据流规范，不仅可以读取filters，还支持直接在父组件修改filters控制表格过滤逻辑。

• 第一步：父组件托管filters状态

import React, { useState } from 'react'
import DataTable from '../dataTable/Datagrid';

function List() {
  // 父组件定义filters状态，可直接用于其他逻辑赋值
  const [filters, setFilters] = useState([])
  // 示例：直接使用filters做业务处理
  console.log('当前生效的过滤条件：', filters)

  return (
    <div>
      <DataTable
        columns={columns}
        data={playerState.items}
        // 给子组件传入受控filters和变更回调
        filters={filters}
        onFiltersChange={setFilters}
      />
    </div>
  )
}

export default List

• 第二步：调整DataTable组件对接受控属性

// Datagrid.jsx内部useReactTable配置处新增逻辑
const tableInstance = useReactTable({
  columns,
  data,
  // 父组件传入filters时启用受控模式
  ...(props.filters !== undefined && {
    state: {
      filters: props.filters
    },
    onFiltersChange: (updater) => {
      const newFilters = typeof updater === 'function' ? updater(props.filters) : updater
      props.onFiltersChange?.(newFilters)
    }
  }),
  // 保留你原有其他配置，如getCoreRowModel、getFilteredRowModel等
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
})

方案2：通过ref暴露内部filters（适合只读场景） #

如果不需要修改filters、仅需读取，可通过ref直接暴露内部状态，改动量更小。

• 第一步：改造DataTable组件支持ref暴露

// Datagrid.jsx
import React, { forwardRef, useImperativeHandle } from 'react'
import { useReactTable, getCoreRowModel, getFilteredRowModel } from '@tanstack/react-table'

const DataTable = forwardRef((props, ref) => {
  const tableInstance = useReactTable({
    // 保留你原有全部配置
    columns: props.columns,
    data: props.data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
  })

  // 把内部filters暴露给外部ref
  useImperativeHandle(ref, () => ({
    filters: tableInstance.getState().filters
  }), [tableInstance])

  // 原有渲染逻辑保持不变
  return (/* 原有表格渲染代码 */)
})

export default DataTable

• 第二步：父组件通过ref读取filters

import React, { useRef } from 'react'
import DataTable from '../dataTable/Datagrid';

function List() {
  const tableRef = useRef()

  // 需要读取时直接从ref获取即可，可在事件、副作用中调用
  const getFilters = () => {
    console.log('表格内部filters：', tableRef.current?.filters)
  }

  return (
    <div>
      <DataTable
        ref={tableRef}
        columns={columns}
        data={playerState.items}
      />
    </div>
  )
}

export default List

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