如何从父组件设置React Table的选中行状态？

你遇到的问题核心是父组件状态和React Table内部选中状态没有做双向同步，以下是两种可直接落地的实现方案： #

受控状态方案（官方推荐） #

这是React Table文档推荐的标准实现，不会出现内部选行失效的问题，核心是通过useControlledState将父组件状态同步到表格，同时监听表格内部选中变更同步回父组件：

1. 父组件维护选中状态，传递给表格组件同时接收变更回调

// 父组件代码
import { useState } from 'react'
import MyTable from './MyTable'

function App() {
  // 父组件维护选中行ID映射，key为行id，value为true表示选中
  const [selectedRowIds, setSelectedRowIds] = useState({})

  const handleEmptySelection = () => {
    // 直接修改父组件状态即可同步到表格
    setSelectedRowIds({})
  }

  return (
    <div>
      <button onClick={handleEmptySelection}>Empty selection</button>
      <MyTable 
        data={tableData}
        columns={tableColumns}
        selectedRowIds={selectedRowIds}
        onSelectedChange={setSelectedRowIds}
      />
    </div>
  )
}

2. 表格组件内配置受控状态与同步逻辑

// 表格组件代码
import { useTable, useRowSelect } from 'react-table'

function MyTable(props) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns: props.columns,
      data: props.data,
      // 将父组件传入的selectedRowIds作为受控状态
      useControlledState: (state) => {
        return {
          ...state,
          selectedRowIds: props.selectedRowIds
        }
      },
      // 关闭自动重置，避免数据/列更新时意外清空选中
      autoResetSelectedRows: false
    },
    useRowSelect,
    // 监听表格内部选中变更，同步回父组件
    (hooks) => {
      hooks.useInstanceAfterUpdate.push((instance) => {
        if (instance.state.selectedRowIds !== props.selectedRowIds) {
          props.onSelectedChange(instance.state.selectedRowIds)
        }
      })
    }
  )

  // 原有表格渲染逻辑不变
  return (
    <table {...getTableProps()}>
      {/* 表格内容 */}
    </table>
  )
}

非受控Ref方案（轻量场景适用） #

如果不需要父组件时刻感知选中状态，只想偶尔主动操作选中行，可以通过ref暴露表格实例方法实现：

1. 表格组件通过useImperativeHandle暴露操作方法

// 表格组件代码
import { forwardRef, useImperativeHandle } from 'react'
import { useTable, useRowSelect } from 'react-table'

const MyTable = forwardRef((props, ref) => {
  const tableInstance = useTable(
    {
      columns: props.columns,
      data: props.data,
      autoResetSelectedRows: false
    },
    useRowSelect
  )

  // 对外暴露操作方法
  useImperativeHandle(ref, () => ({
    clearSelection: () => tableInstance.toggleAllRowsSelected(false),
    setSelectedRows: (selectedIds) => tableInstance.setSelectedRowIds(selectedIds)
  }))

  // 原有表格渲染逻辑不变
  return <table {...tableInstance.getTableProps()}>{/* 表格内容 */}</table>
})

2. 父组件通过ref调用方法

// 父组件代码
import { useRef } from 'react'
import MyTable from './MyTable'

function App() {
  const tableRef = useRef()

  const handleEmptySelection = () => {
    tableRef.current?.clearSelection()
  }

  return (
    <div>
      <button onClick={handleEmptySelection}>Empty selection</button>
      <MyTable ref={tableRef} data={tableData} columns={tableColumns} />
    </div>
  )
}

避坑说明 #

• 不要直接依赖autoResetSelectedRows做主动清空：该配置的作用是在data/columns更新时自动重置选中，主动调用会导致分页、排序等操作时出现非预期的选中清空。
• 之前使用useControlledState出现选行失效，是因为只做了父状态到表格的单向同步，没有将表格内部变更同步回父组件，补充回调同步逻辑即可解决。

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