如何将React Table行数据传递至详情页？多页面复用组件方案

你需要通过回调函数让父组件（如CustomerPage）接管行点击后的逻辑，这样MaintainTable组件保持无状态且可复用，父组件负责跳转和数据传递。具体步骤如下：

步骤1：改造MaintainTable组件，添加回调props #

移除组件内部的状态管理逻辑，改为接收父组件传入的onRowClick回调，点击行时将原始行数据传入该回调：

export const MaintainTable = ({ Columns, Data, onRowClick }) => {
    const columns = React.useMemo(() => Columns, [Columns])
    const data = React.useMemo(() => Data, [Data])
   
  const tableInstance = useTable({
    columns,
    data
  }, useGlobalFilter, useSortBy)
  
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    setGlobalFilter,
   } = tableInstance

   const { globalFilter } = state

   
  return (
    <>
    <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
    <Table {...getTableProps()}>
    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps(column.getSortByToggleProps())}>{column.render('Header')}
            <span>
            {column.isSorted ? column.isSortedDesc ? ' 🔽 ': ' 🔼 ': ''}
            </span>
            </th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map((row, i) => {
        prepareRow(row)
        return (
          <tr 
            {...row.getRowProps()}  
            onClick={() => onRowClick(row.original)}
          >
            {row.cells.map(cell => {
              return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            })}
          </tr>
        )
      })}
    </tbody>
  </Table>
  </>
  )
}

注：react-table中row.original对应你传入的原始数据项，是传递行数据最可靠的方式。

步骤2：在CustomerPage中处理跳转逻辑 #

假设使用react-router-dom v6，通过useNavigate钩子实现页面跳转，并将行数据存入location.state：

import { useNavigate } from 'react-router-dom';

const CustomerPage = () => {
  const navigate = useNavigate();

  const handleRowClick = (customerData) => {
    navigate('/customer-detail', { state: { customer: customerData } });
  };

  return (
    <div className="container">
      <div className="row mt-4">
        <div className="col-md-12">
          <MaintainTable 
            Columns={COLUMNS} 
            Data={customers.data} 
            onRowClick={handleRowClick}
          />
        </div>
      </div>
    </div>
  );
};

步骤3：在CustomerDetailPage中接收数据 #

用useLocation钩子获取传递的状态数据：

import { useLocation } from 'react-router-dom';

const CustomerDetailPage = () => {
  const location = useLocation();
  const customer = location.state?.customer;

  if (!customer) {
    return <div>未找到客户数据</div>;
  }

  return (
    <div>
      <h1>客户详情</h1>
      <p>姓名: {customer.name}</p>
      {/* 渲染详情字段及新增/编辑表单 */}
    </div>
  );
};

替代方案 #

如果需要跨多页面共享数据或持久化状态，可以使用Redux、Zustand等状态管理库，但对于简单的页面跳转场景，location.state是轻量且合适的选择。

改造后，MaintainTable组件完全复用，其他业务页面（如订单页、产品页）只需传入各自的onRowClick回调，即可实现对应详情页的跳转和数据传递。

内容的提问来源于stack exchange，提问作者Dome S