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

Question

columns我的表格组件数组中有一个列react-table，需要在单元格内渲染一个下拉按钮，以允许用户将该行数据渲染到另一个模式组件中进行编辑。

我正在使用dropdownToggles一个布尔数组 - 设置为与表中的行数相同的长度 - 跟踪行中的哪个下拉列表应设置为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

看起来Cellpropsrow中包含index，所以只需从 props 解构它即可：

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