reactjs - React-Table:获取父组件中的selectedRowIds

Question

我正在渲染一个 react 表，需要知道在父组件中选择了哪些行。

这是我的表格组件:

const TableComponent = (props) => {
  const { columns, data } = props;
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { selectedRowIds },
  } = useTable(
    {
      columns,
      data,
    },
    useRowSelect
  );

  return (
    <table {...getTableProps()}>
        <thead>
            {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                ))}
            </tr>
            ))}
        </thead>
        <tbody {...getTableBodyProps()}>
            {rows.slice(0, 10).map((row, i) => {
            prepareRow(row);
            return (
                <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                    return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                })}
                </tr>
            );
            })}
        </tbody>
    </table>
  );
};

这是父级:

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            accessor: "firstName",
          },
          {
            Header: "Last Name",
            accessor: "lastName",
          },
        ],
      },
      {
        Header: "Info",
        columns: [
          {
            Header: "Age",
            accessor: "age",
          },
          {
            Header: "Visits",
            accessor: "visits",
          },
          {
            Header: "Status",
            accessor: "status",
          },
          {
            Header: "Profile Progress",
            accessor: "progress",
          },
        ],
      },
    ],
    []
  );

  const data = React.useMemo(() => makeData(10, 3), []);

  return (
    <Table columns={columns} data={data} />
  );
}

我需要知道父组件中的 selectedRowIds。有谁知道我如何从 child 那里得到这些？

Answer 1

您可以使用useImperativeHandleHook 从子组件 公开该方法imperativehandle .

并且在这个钩子(Hook)的帮助下，您可以在父组件中获取选定的行 id。

useImperativeHandle(ref, () => ({
    getSelectedRows:()=> selectedRowIds 
}),[selectedRowIds]);

并且在父组件中，您必须使用 ref 调用该方法作为parentRef.current.getSelectedRows()

如果有帮助，请告诉我。