使用 pre-existing redux 存储实现 fixed-data-table-2 排序？

Question

提前感谢您提供给我的任何信息或指示。

我对反应还比较陌生。我继承了一个 pre-existing 项目，我已经为一个客户工作了几周，到目前为止一切顺利。我遇到了需要添加到项目中的功能。

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

基本上，客户要求我允许他们在双向 ASC/DESC.

上单击 header col 时能够按字母顺序对文件名称进行排序

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

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

任何有 Redux 经验的好心人能给我一个指导或一个例子吗？

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

我不喜欢table 分享这个项目的代码，因为我自己不拥有代码。

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

编辑我对这个有点不知所措。同样，我是 React 的新手，希望能得到一些帮助来完成这项任务。

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

所以这是我的 header 单元格组件，用于显示数据 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);

我还在我的减速器中添加了脚趾动作：现在我只想让它朝一个方向排序我稍后会加入相反的功能：

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;

并且我将我的 header 单元格组件包括在 table 组件中，如上所述。

我很乐意就以下错误寻求帮助：

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

我总共有 3 个错误都与道具未被识别有关。

请耐心等待我，因为我只用 React 工作了几周，如果我错误地使用了状态和道具，我深表歉意，我知道我肯定没有正确地遵循 propTypes 范围。

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

Answer 1

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

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

那么你需要做什么：

你描述的已经有一个table了！很简单！检查通过 cell prop 传递的内容。这是来自 redux store 的数据数组！
在github示例之后编写一个onSortChange函数调用redux操作来更新数据（将排序列表设置为redux状态）
创建一个可以点击的 SortHeaderCell 组件并调用你的 onSortChange 函数来改变 redux 状态。

使用 pre-existing redux 存储实现 fixed-data-table-2 排序？

Implementation of fixed-data-table-2 sorting using pre-existing redux store?

javascript

reactjs

react-redux

fixed-data-table