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

Question

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

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

{
    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 只有 table 中显示的内容。

Answer 2

我遇到过类似的问题，我是这样解决的：

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

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

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

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

react-table custom cell component that references several row properties

reactjs

react-table