时间戳

首页 > 解决方案 > 使用预先存在的 redux 存储实现固定数据表 2 排序？

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

问题描述

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

我对反应比较陌生。我继承了一个已经为客户工作了几个星期的预先存在的项目，到目前为止一切进展顺利。我遇到了需要添加到项目中的功能。

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

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

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

我一直在使用示例库来尝试实现它，但我对他们在示例中使用的数据感到非常困惑。由于我使用的是 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);

我还在我的减速器中添加了脚趾动作：现在我只希望它朝一个方向排序，稍后我将添加反向功能：

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 无法识别headerCellDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写字母headercell。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

我总共有 3 个错误，都与无法识别的道具有关。

请耐心等待我，因为我只是在几周内做出反应，所以如果我错误地使用了 state 和 props，我深表歉意，我知道我绝对没有正确遵循 propTypes 范围。

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

标签： javascriptreactjsreact-reduxfixed-data-table

解决方案

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

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

所以你必须做的：

  1. 你描述的已经有一张桌子了！够简单！查看通过 cell prop 传递的内容。这是来自 redux 存储的数据数组！

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

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

推荐阅读