reactjs - 如何从 react-data-grid 的列格式化程序组件调度操作

Question

单击自定义格式的删除按钮时，我需要调度删除行条目的操作

Answer 1

我想你想要的在这里可用

您可以在网格格式化程序中使用道具，例如

render() {
return  (
  <ReactDataGrid
    columns={this._columns}
    rowGetter={this.rowGetter}
    rowsCount={this._rows.length}
    minHeight={500}
    rowRenderer={RowRenderer} />);

}

并且RowRenderer是一个函数

const RowRenderer = React.createClass({
            propTypes: {
                idx: React.PropTypes.string.isRequired
            },

            setScrollLeft(scrollBy) {
                // if you want freeze columns to work, you need to make sure you implement this as apass through
                this.refs.row.setScrollLeft(scrollBy);
            },

            getRowStyle() {
                return {
                    color: this.getRowBackground()
                };
            },

            getRowBackground() {
                return this.props.idx % 2 ?  'green' : 'blue';
            },

            render: function() {
                // here we are just changing the style
                // but we could replace this with anything we liked, cards, images, etc
                // usually though it will just be a matter of wrapping a div, and then calling back through to the grid
                return (<div style={this.getRowStyle()}><ReactDataGrid.Row ref="row" {this.props}/></div>);
            }
        });

Answer 2

我遇到了类似的问题并以不同的方式解决了它。我有 2 列我想为其添加可选图像，添加的功能是通过 redux 删除条目并下载文件。

我有一个包装的顶级反应组件，如下所示：

class ItemComponent extends Component {

  constructor(props) {
    super(props);
    this.props.getData();
  }

  additionalColumns = (item) => {
    let conditionalImage;

    if (record.status === 'SOMETHING') {
      conditionalImage = (
        <div>
          <a href="javascript:void(0)" role="button" onClick={() => this.download(item)}><span className="fa fa-file" /></a>
        </div>
      );
    }

    return {
      ...record,
      conditionalImage,
      delete: (
        <div>
          <a href="javascript:void(0)" role="button" onClick={() => this.delete(item)}><span className="fa fa-trash" /></a>
        </div>
      ),
    };
  };

  delete(item) {
    //here you would call your redux action
    console.log(item);
  }

  download(item) {
    //here you would call your redux action
    console.log(item);
  }

  render() {
    return (
      <main className="items">
        <TableWrapper items={this.props.items} additionalColumns={this.additionalColumns} />
      </main>
    );
  }
}

TableWrapper 组件是构建 ReactDataGrid 的功能性无状态组件：

const TableWrapper = ({ items, additionalColumns }) => {

  const itemsWithAddColumns = items.map(additionalColumns);

  const rowGetter = rowNumber => itemsWithAddColumns[rowNumber];

  return (
    <div>
        <ReactDataGrid
          rowKey="id"
          columns={ExternallyDefinedColumns}
          rowGetter={rowGetter}
          rowsCount={recordsPlus.length}
          enableRowSelect="multi"
          minHeight={600}
          emptyRowsView={ExternallyDefinedEmptyRowsView}
        />
    </div>
  );
};

所以基本上这里发生的事情是您将传递给 ReactDataGrid 的数组用于填充行并使用您自己的自定义逻辑来扩展它，该逻辑指向您的顶级反应组件中的方法。这意味着您可以获取选择了哪些项目的结果，并将所需的任何数据传递给您的 redux 层，或者如果您不使用 redux，则可以更新您的状态。