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

IT技术 reactjs react-table
2021-05-11 15:24:40

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

表格单元格之一将包含一个链接并需要访问更多的一行属性。到目前为止,链接列代码如下所示:

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

结果是这样的元素: td

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

3个回答

结果我需要使用 cellInfo.original 而不是 cellInfo.row。当您提供Cell渲染器时,您应该使用它cellInfo.original来获取所有行数据(特别是如果您没有将该数据显示为列)。row只有什么是显示在表格中。

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

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

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

在列中,您可以拥有:

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