Question

我是Ag-grid-react的新手。目前，App中有一个简单的反应表工作正常，但它没有像Ag-grid这样强大的功能。我正在考虑改用Ag-grid-react。

但是，在实施过程中。我发现当我将来自外部数据源的道具更新为Ag-grid时。 Ag-grid-react将自动重新渲染整个表并忘记以前的设置。

我使用Meteor 1.4作为平台，将React 15.4.2作为框架。

问题： this.props.data是我要显示的外部数据源。它适用于第一次渲染，但是当我从外部更改单元格值时。道具变化。它会重新渲染表格。如何避免自动重新渲染并仅更改已更改的单元格值？

我在文档中看到有API可以调用并在Ag-grid中更改行数据。如果我使用API，那么每次我的数据更改都需要做一个prev的道具和当前道具检查数据源并使用API将更改发送到Ag-grid。是否假设React会自动检查并仅重新渲染我已更改的子组件？

如果有任何解决方案可以解决这个问题。

部分代码：

class MasterDetailExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rowData: this.props.data,
            columnDefs: this.createColumnDefs(),
        };
        this.onGridReady = this.onGridReady.bind(this);
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
    }

...//Some code for createColumnDefs()

    isFullWidthCell(rowNode) {
        return rowNode.level === 1;
    }

    getRowHeight(params) {
        let rowIsDetailRow = params.node.level === 1;
        return rowIsDetailRow ? 200 : 25;
    }

    getNodeChildDetails(record) {
        if (record.callRecords) {
            return {
                group: true,
                key: record.name,
                children: [record.callRecords],
            };
        } else {
            return null;
        }
    }

    render() {
        return (
            <div style={{height: 1000 , width: "100%" }}
                 className="ag-fresh">
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}

                    isFullWidthCell={this.isFullWidthCell}
                    getRowHeight={this.getRowHeight}
                    getNodeChildDetails={this.getNodeChildDetails}
                    fullWidthCellRendererFramework={DetailPanelComponent}

                    enableSorting
                    enableColResize
                    suppressMenuFilterPanel

                    onGridReady={this.onGridReady}>
                </AgGridReact>
            </div>
        );
    }
};

Answer 1

就像@JulienD一样，deltaRowDataMode是关键。

设置deltaRowDataMode={true}
相反，参数rowData在setRowData()回调中和onGridReady中使用componentDidUpdate
不要忘记getRowNodeId={data => data.id}

这将为您进行比较和更新确切的行。

docs：https://www.ag-grid.com/javascript-grid-data-update/#delta-row-data

Ag-grid-react Not Refresh正确刷新

1 个答案: