引用多个行属性的 react-table 自定义单元格组件

Posted 2023-02-19

【中文标题】引用多个行属性的 react-table 自定义单元格组件

【英文标题】：react-table custom cell component that references several row properties

【发布时间】：2018-02-08 15:54:02

【问题描述】：

我需要按列实现表格排序，所以我使用 react-table 的 ReactTable 组件重写了我的反应表组件。

其中一个表格单元格将包含一个链接，并且需要访问多个行属性。到目前为止，链接列代码如下所示：

    Header: "Name",
    accessor: "name",
    Cell: cellInfo => (
        <Link className="scenarioDetailLink"
              to=cellInfo.row.linkDestination
              id=cellInfo.row.linkName>cellInfo.row.name</Link>
    )
,

它会产生这样的元素：

生成的锚元素缺少 id 和 href 属性。我做错了什么。

【参考方案1】：

在一列中你可以有：

 
     Header: "dataProperty",
     accessor: "dataProperty",
     Cell: ( value, row ) => 
         // here you can use value to render cell 
         // with value of dataProperty
         // or you can access all other row data properties 
         // from row.original
         // for example:
         return row.original.id; 
      
    ,

【参考方案2】：

我也遇到过类似的问题，解决方法如下：

Cell: (tableInfo) => `$ tableInfo.data [tableInfo.row.index] .dateToShow`

在哪里： tableInfo 是一个对象，它具有以下属性：columns: []、data: []、comlumn: 、row: [.]、cell: 和 dateToShow 是一个不在视图，但存在于数据模型中。 如果您需要访问表视图中的数据，您可以使用行对象，如果它不在表视图中，您可以使用数据数组访问数据模型。

【讨论】：

我的问题是几年前的问题，react-table 发生了很大变化。您使用的是哪个版本？

我使用的版本是7.0.0。几年前是正确的，但我还没有找到其他解决方案，所以发布我的经验似乎很方便，以防对其他人有用。

【参考方案3】：

原来我需要使用 cellInfo.original 而不是 cellInfo.row。当您提供Cell 渲染器时，您应该使用cellInfo.original 来获取所有行数据（特别是如果您没有将这些数据显示为列）。 row 仅包含表中显示的内容。

【讨论】：

我使用的是版本 7。如果您在 Cell 函数的主体中使用 console.log(cellInfo)，您可以看到所有属性。对象，函数返回。这是很多。我到达原始对象的方式。 IE。当你定义传递给 useTable 钩子的数据数组时，你传入的对象是去 cellIinfo.row.original.linkName。我认为 API 在 6 到 7 之间发生了一些变化