如何访问 react-table 组件的列中的行索引

Question

我的 columns 数组中有一列用于我的 react-table Table 组件，它需要在单元格内呈现下拉按钮以允许用户将该行数据呈现到另一个要编辑的模态组件。

我正在使用 dropdownToggles，一个布尔数组 - 设置为与 table 中的行数相同的长度 - 跟踪行中的哪个下拉列表应该是设置为 isOpen.

我是否可以访问 columns 中数据的行索引，以便我可以将索引传递给 isOpen={dropdownToggles[i]} 和 toggle={() => setDropdownToggles(handleDropdownToggles(i))} ？

import React, { useState, useEffect, useMemo } from "react";

import { useSelector } from "react-redux";

import { Dropdown } from "reactstrap";

const Table = () => {
    const { tasks } = useSelector(state => state.data);
    const numTasks = tasks.data.length;

    const [dropdownToggles, setDropdownToggles] = useState([]);

    useEffect(() => {
        setDropdownToggles(new Array(numTasks).fill(false));
    }, [numTasks]);

    const data = useMemo(() => tasks.data, [tasks.data]);

    const columns = useMemo(() => {
        const handleDropdownToggles = (toggleThisOne) => (
            dropdownToggles.map((dropdownState, i) => i === toggleThisOne ? !dropdownState : dropdownState)
        );

        return [
            {
                Header: "",
                accessor: "_id",
                Cell: ({ _id }) => (
                    <Dropdown isOpen={dropdownToggles[i]} toggle={() => setDropdownToggles(handleDropdownToggles(i))}>
                        
                    </Dropdown>
                )
            }
        ];
    }, [dropdownToggles]);

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        prepareRow,
        page,
        canPreviousPage,
        canNextPage,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        state: { pageIndex }
    } = useTable({
        columns,
        data,
        initialState: { pageSize: 10 }
    }, usePagination);

    /* rendered component below */
};

Answer 1

看起来 Cell props 中有 row 其中包含 index，所以它只是从 props 中解构它的问题：

Cell: ({ row }) => (
    <Dropdown isOpen={dropdownToggles[row.index]} toggle={() => setDropdownToggles(handleDropdownToggles(row.index))}>
                        
    </Dropdown>
)

如何访问 react-table 组件的列中的行索引

How to access the row index in the columns of a react-table component

reactjs

reactstrap

react-table