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

Question

我需要按列实现表格排序，所以我使用 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 属性。我究竟做错了什么。

Answer 1

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

Answer 2

我有一个类似的问题，我已经解决了如下：

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

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

Answer 3

在列中，您可以拥有：

 {
     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; 
      }
    },