React-Table自定义单元格组件，引用了多个行属性。

Question

我需要按列实现表格排序，因此正在使用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>
    )
},

结果会产生这样的元素：

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

- softweave

Answer 1

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

- softweave

---

我正在使用版本7。如果在Cell函数的主体中console.log(cellInfo)，您可以看到所有属性、对象和返回的函数。这是很多的。我找到原始对象的方法。即，当您定义传递给useTable钩子的数据数组时传递的对象，是通过cellIinfo.row.original.linkName进行的。我认为API在6和7之间有些变化。 - Faktor 10

Answer 2

我曾经遇到过类似的问题，并按照以下方式解决：

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

其中： tableInfo是一个包含以下属性的对象：{columns: []}, data: [], comlumn: {}, row: [.], cell: {}}，而dateToShow是一个值，不在视图中，但存在于数据模型中。 如果需要访问表格视图中的数据，可以使用row对象，如果不在表格视图中，则可以使用data数组访问数据模型。

- Rodolfo F Juarez

---

我的问题已经有几年了，react-table 已经发生了很多变化。你使用的是哪个版本？ - softweave

我使用的版本是7.0.0。虽然它已经有几年了，但我没有找到其他解决方案，所以似乎方便将我的经验发布出来，以防对他人有用。 - Rodolfo F Juarez

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

- enrico.devita