如何将道具传递到反应表中的行

如何解决如何将道具传递到反应表中的行

我一直在关注https://blog.logrocket.com/complete-guide-building-smart-data-table-react/。要根据单元格值应用自定义样式，我将像这样更新列对象：

return {
  Header: key,accessor: key,width: "150",sortType: "basic",Cell: ({cell: {value} }) => {
    if (value == "Error") {
      return <RedCell/>
    }
    ...
  }
}

是否可以将自定义样式应用于包含单元格的行？我想道具必须向下传递，但对于如何做到这一点根本不清楚。

任何指针将不胜感激。

解决方法

对于遇到此问题的任何人，react-table 库的作者已在此处回答了这个问题 — https://spectrum.chat/react-table/general/v7-row-getrowprops-how-to-pass-custom-props-to-the-row~ff772376-0696-49d6-b259-36ef4e558821

在您的 Table 组件中，您为行传递您选择的任何道具（例如，rowProps） —

<Table
        columns={columns}
        data={data}
        rowProps={row => ({
          onClick: () => alert(JSON.stringify(row.values)),style: {
            cursor: "pointer"
          }
        })}
      />

然后实际使用这个——

function Table({ columns,data,rowProps = () => ({}) }) {
  // Use the state and functions returned from useTable to build your UI
  const { getTableProps,headerGroups,rows,prepareRow } = useTable({
    columns,data
  });

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {rows.map(
          (row,i) =>
            prepareRow(row) || (
              <tr {...row.getRowProps(rowProps(row))}>
                {row.cells.map(cell => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            )
        )}
      </tbody>
    </table>
  );
}

当前，您正在将样式应用于列定义。

为了将样式应用于整个Row。（例如，如果value ==“ Error”，则将整个行变成红色），我将在您的表UI中进行操作。

在用户界面中，您将要调用prepareRow(row)，然后使用该行来渲染单元格。

也许与：row.cells.map

这时，您可以根据单元格row.cells[0]

的内容执行其他操作

也许是这样的：

                  {(row.cells[0].value !== "Error" && row.cells.map(cell =>
                    {
                        return (
                            <TableCell {...cell.getCellProps({ className: cell.column.className })}>
                                {cell.render('Cell')}
                            </TableCell>
                        );
                    })) ||  <RedRow />}