如何在React-table Cell中使用多个值？

Question

我的代码中有这个：

{
    Header: "Amount",
    accessor: "reward_amount",
    Cell: ({ value }) => `$${value / 100.0}`,
}

所以

value

是

reward_amount

，但我还需要查看行数据上的另一个值，以确定单元格内容应该是什么。

这里有更多代码：

export default function myFunc(props) {
  const [data, setData] = useState(props.stuff);

  useEffect(() => {
    setData(props.stuff);
  }, [props.stuff]);

  const columns = useMemo(
    () => [
      ...
      {
        Header: "Amount",
        accessor: "reward_amount",
        Cell: ({ value }) => `$${value / 100.0}`,
      },
      ...
    ],
    []
  );

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable(
      {
        columns,
        data,
      },
      useRowSelect
    );

  return (...);
}

Answer 1

可以使用 row.original 对象访问行数据。

{
    Header: "Amount",
    Cell: ({ row }) => `$${row.original.reward_amount / 100.0}`,
}

Answer 2

谢谢大家的回答。对我来说，它有效：

{
    header: "ID",
    cell: (props) => (<React.Fragment>
            {props.row.original.serverId}  
            {props.row.original.locationCode}
        </React.Fragment>)
}

表格内您应该使用的重要内容是：

flexRender(cell.column.columnDef.cell, cell.getContext())

不仅仅是 cell.getValue()

我希望它对某人有帮助！