如何添加排序表反應虛擬化？

Question

我正試圖在Github上使用表格排序演示向我的項目添加排序。

我的代碼：

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Table, Column, SortDirection, SortIndicator } from 'react-virtualized'; 
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; 

import 'react-virtualized/styles.css'; 

class NewTable extends React.Component { 
    constructor(props) { 
    super(props); 

    this.dataList = props.list; 

    this.state = { 
     headerHeight: 50, 
     rowHeight: 25, 
     rowCount: this.dataList.length, 
     height: 400, 
     sortBy: 'columnone', 
     sortDirection: SortDirection.ASC, 
    }; 

    this.headerRenderer = this.headerRenderer.bind(this); 
    this.sort = this.sort.bind(this); 
    } 

    isSortEnabled() { 
    const list = this.dataList; 
    const rowCount = this.state; 

    return rowCount <= list.length; 
    } 

    sort({ sortBy, sortDirection }) { 
    this.setState({ sortBy, sortDirection }); 
    } 

    headerRenderer({ 
    dataKey, 
    sortBy, 
    sortDirection, 
    }) { 
    return (
     <div> 
     Column One 
     {sortBy === dataKey && 
      <SortIndicator sortDirection={sortDirection} /> 
     } 
     </div> 
    ); 
    } 

    render() { 
    const { 
     headerHeight, 
     height, 
     rowHeight, 
     sortBy, 
     sortDirection, 
    } = this.state; 

    const list = this.dataList; 
    const sortedList = this.isSortEnabled() ? 
     (list.sortBy(item => item[sortBy]).update(list => sortDirection === SortDirection.DESC ? 
     list.reverse() : list)) 
     : list; 

    return (
     <AutoSizer disableHeight> 
     {({ width }) => (
      <Table 
      headerHeight={headerHeight} 
      height={height} 
      rowCount={list.length} 
      rowGetter={({ index }) => sortedList[index]} 
      rowHeight={rowHeight} 
      sort={this.sort} 
      sortBy={sortBy} 
      sortDirection={sortDirection} 
      width={width} 
      > 
      <Column 
       dataKey='columnone' 
       headerRenderer={this.headerRenderer} 
       disableSort={!this.isSortEnabled} 
       width={200} 
       flexGrow={1} 
      /> 
      </Table> 
     )} 
     </AutoSizer> 
    ); 
    } 
} 

export default NewTable; 

我的代碼顯示點擊時，ASC和DESC箭頭翻轉向上和向下，但實際排序不會發生。我錯過了什麼？

我真的不明白排序在哪裏發生。我看到了這些功能，但是我看不到輸出的地方。

謝謝！

編輯：數據作爲JSON輸入。

Answer 1

的代碼片段您粘貼，如react-virtualized Table demo頁面上，執行排序內嵌的render函數中：

const sortedList = this._isSortEnabled() 
    ? list 
     .sortBy(item => item[sortBy]) 
     .update(
     list => 
      sortDirection === SortDirection.DESC ? list.reverse() : list 
    ) 
    : list; 

這可能不是你想要的生產應用程序，因爲它必須每次渲染組件時都要對數據進行重新排序。相反，您可能只想對sortBy字段或sortDirection字段進行一次排序，然後將分類後的數據版本存儲在您的組件state（或Redux中，如果使用的話）。

Table通過調用您提供的sort prop來告訴您何時需要對數據進行排序/處理。在你上面的例子，這意味着這個函數被調用：

sort({ sortBy, sortDirection }) { 
    this.setState({ sortBy, sortDirection }); 
} 

既然你存儲的排序標準，您的組件的狀態，也可以存儲在狀態還排序結果：

sort({ sortBy, sortDirection }) { 
    const sortedList = list 
    .sortBy(item => item[sortBy]) 
    .update(
     list => 
     sortDirection === SortDirection.DESC ? list.reverse() : list 
    ); 

    this.setState({ sortBy, sortDirection, sortedList }); 
} 

剩下的唯一東西就是rowGetter函數使用state中的sortedList來檢索行。