React-table：如何使用 getCellProps、getHeaderProps 等？

Question

React Table 的文档非常稀疏，我无法理解这些示例。

例如这里： https: //react-table.tanstack.com/docs/examples/data-driven-classes-and-styles，我们看到这样的代码：

{row.cells.map(cell => {
                return (
                  <td
                    // Return an array of prop objects and react-table will merge them appropriately
                    {...cell.getCellProps([
                      {
                        className: cell.column.className,
                        style: cell.column.style,
                      },
                      getColumnProps(cell.column),
                      getCellProps(cell),
                    ])}
                  >
                    {cell.render('Cell')}
                  </td>

我不清楚发生了什么。

GetCellProps被调用，并提供一个数组作为参数。该数组包含 1. 一个具有两个属性的对象，2. 一次调用getColumnProps（这有什么作用？），然后 3. 另一个调用，getCellProps但现在以单元格作为参数。

然后使用扩展运算符 (...) 对该调用的结果进行运算。

如果有人能帮助我理解这一切，非常感谢。

Answer 1

我会尽力向你解释这一点 -

cell.getCellProps-> 是在每个单元格上公开的方法react-table，这对于根据所使用的插件获取给定单元格所需的所有道具非常有用。

很少，例如。相同的是 -

https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc/src/hooks/useTable.js#L415 https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc /src/插件挂钩/useFlexLayout.js#L47 https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc/src/plugin-hooks/useAbsoluteLayout.js#L23

现在，此方法可以期望提供一个对象或对象列表作为参数，它主要充当对先前值的合并/覆盖，与 object.assign 大致相似，但有一些基于键名称的例外，有关合并逻辑的更多详细信息，请参阅 - https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc/src/publicUtils.js#L19

下面的代码有助于添加className样式cell并与之前返回的值合并/覆盖样式。

{
    className: cell.column.className,
    style: cell.column.style,
}

下面两个方法是组件提供的 props

getColumnProps(cell.column),
getCellProps(cell)

getColumnProps={column => ({
  onClick: () => alert('Column!'),
})}
getCellProps={cellInfo => ({
  style: {
    backgroundColor: `hsl(${120 * ((120 - cellInfo.value) / 120) * -1 +
      120}, 100%, 67%)`,
  },
}

因此，这些 props 返回的任何内容实际上都会合并到cellprops 中，并将应用于td.

PS - 请参阅https://github.com/tannerlinsley/react-table/blob/master/src/publicUtils.js#L48了解cell.getCellProps.