React-Table: 获取parent组件中的selectedRowIds

Question

我正在渲染 react-table 并且需要知道在 parent 组件中选择了哪些行。

这是我的 table 组件：

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>
  );
};

这里是 parent:

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} />
  );
}

我需要知道 parent 组件中的 selectedRowIds。有谁知道我如何从 child 获得这些信息？

Answer 1

您可以使用 useImperativeHandleHook imperativehandle.

公开 child component 中的方法

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

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

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

如果有帮助请告诉我。

React-Table: 获取parent组件中的selectedRowIds

React-Table: Get selectedRowIds in parent component

reactjs

react-table