javascript - 如何使用 react 虚拟化向表添加排序？

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 而不是检索行。