javascript - 使用预先存在的 redux 存储实现固定数据表 2 排序？

Question

预先感谢您为我提供的任何信息或指示。

我的 react 相对较新。我继承了一个已有的项目，我已经为客户工作了几个星期，到目前为止一切进展顺利。我在需要添加到项目中的功能上遇到了困难。

因此，该项目使用fixed-data-table-2 库，并显示一个非常简单的表格，其中有两列，一列是复选框，另一列是文件名。

基本上，客户要求我允许他们通过单击标题栏在 ASC/DESC 两个方向上按字母顺序对文件名进行排序。

我可以使用一个不同的库，我会自动包含这种排序，但客户限制我使用这个库，因为它在他们所有现有的工具中使用，等等......

我一直在使用示例库来尝试和实现它，但我对他们在示例中使用的数据感到非常困惑。由于我使用的是 redux 存储:https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/SortExample.js

是否有任何有 Redux 经验的好心人可以给我一个指示或一个完成此操作的示例。

我的项目正在使用容器(逻辑)、(组件 UI)。使用 reducer 来改变通过操作调用的状态。

我不愿意分享这个项目的代码，因为我自己不拥有这些代码。

我理解移动部件，但文档中给出的示例令人困惑。再次感谢您提前提供的任何建议。

编辑 我对这个有点不满意。再说一遍，我是 React 新手，希望得到一些帮助来完成这项任务。

抓取术语是客户端使用的，它只是一个 zip 文件。

这是我的标题单元组件，用于显示数据 id 排序的箭头方向:

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {Cell} from 'fixed-data-table-2';

var SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC'
};

function reverseSortDirection(sortDir) {
  return sortDir === SortTypes.DESC ? SortTypes.ASC : SortTypes.DESC;
}

class HeaderCellSelected extends Component {

  constructor(props, context) {
    super(props, context);

    this._onSortChange = this._onSortChange.bind(this);
  }

  render() {
    const {onSortChange, sortDir, children, ...props} = this.props;
    return (
      <Cell {...props}
            sortDir={this.props.sortDir}
            headerCell={this.props.headerCell}
      >
      <a onClick={this._onSortChange}>
          {children} {sortDir ? (sortDir === SortTypes.DESC ? '↑' : '↓') : ''}
      </a>
  </Cell>
    );
  }

  _onSortChange(e) {
    e.preventDefault();

    if (this.props.sortGrabs) {
      this.props.sortGrabs(
        this.props.columnKey,
        this.props.sortDir ?
          reverseSortDirection(this.props.sortDir) :
          SortTypes.DESC
      );
    }
  }
}

HeaderCellSelected.propTypes = {
  headerCell: PropTypes.string.isRequired,
  sortDir: PropTypes.string.isRequired,
  sortGrabs: PropTypes.func.isRequired,
  columnKey: PropTypes.string.isRequired
};

export default HeaderCellSelected;

这是我的容器:

import PropTypes from 'prop-types';
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../grabsTableActions';
import HeaderCellSelected from './SortHeaderCellComponent';

export const HeaderCellContainer = (props) => {

  return (
    <HeaderCellSelected
      headerCell={props.headerCell}
      sortDir={props.sortDir}
      sortGrabs={props.actions.sortGrabs}
      columnKey={"fileName"}
    />
  );
};

function mapStateToProps(state) {
  return {
    headerCell: state.grabsTable.sortCol,
    sortDir: state.grabsTable.sortDir
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, actions), dispatch)
  };
}

HeaderCellContainer.propTypes = {
  actions: PropTypes.object.isRequired,
  headerCell: PropTypes.string.isRequired,
  sortDir: PropTypes.string.isRequired
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HeaderCellContainer);

我还在我的 reducer 中添加了脚趾 Action :现在我只希望它按一个方向排序，稍后我将添加相反的功能:

case SORT_GRABS: {
      let grabs = state.grabs.map(grab => grab);
      grabs = grabs.sort(function(a, b){
        var valueA=a[action.columnKey].toLowerCase(), valueB=b[action.columnKey].toLowerCase();
        if (valueA < valueB){
          return -1;
        }
        if (valueA > valueB){
          return 1;
        }
        return 0;
      });
      return {...state, grabs};
    }
    default:
      return state;

我将标题单元格组件包含在表格组件中，如上所述。

我希望获得有关以下错误的帮助:

React 无法识别 DOM 元素上的 headerCell 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 headercell。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

我总共有 3 个错误，所有错误都与 Prop 未被识别有关。

请耐心等待我，因为我刚刚使用 React 几周，所以如果我错误地使用了状态和 Prop ，我深表歉意，并且我知道我绝对没有正确遵循 propTypes 范围。

现在只是最后一点，当我单击列标题时，我正在调用 SORT_GRABS 操作，该操作调用我的 reducer ，但没有任何反应。感谢您提前提供的任何帮助。

Answer 1

您链接的示例似乎非常简单。他们创建了一个名为 SortHeaderCell 的组件，您可以为列定义该组件并将其作为 prop 传递给 Column 组件。 SortHeaderCell 需要您必须实现的 onSortChange 属性函数。您存储在 Redux 存储中的数据可以通过名为 cell 的 prop 传递到 Column 组件。在这里您传递已经排序的数据列表。

        <Column
          columnKey="id"
          header={
            <SortHeaderCell
              onSortChange={this._onSortChange}
              sortDir={colSortDirs.id}>
              id
            </SortHeaderCell>
          }
          cell={<TextCell data={sortedDataList} />}
          width={100}
        />

所以你必须做什么:

1. 您描述已经有一张 table 了!够简单的!查看通过 cell 属性传递的内容。这是来自 redux 存储的数据数组!

2. 按照 github 示例编写一个 onSortChange 函数，调用 redux 操作来更新数据(将排序列表设置为 redux 状态)

3. 创建一个可单击的 SortHeaderCell 组件，并调用您的 onSortChange 函数来更改 redux 状态。