4

我想让一个单元格根据props.data与该行绑定的对象中可用的其他数据以某种方式呈现。但是我不知道当其他数据发生变化时如何让单元格重新渲染。

我有一个非常简单的数据结构，我试图在 ag-grid 中显示，基本上是一个属性数组，每个都有一个名称、一个值和一个 isLoading 标志，指示属性是否正在更新（如后台刷新可能发生，网格单元格中的数据是只读的）。

我希望网格显示名称和值列，并且我希望值列显示微调器图标 if isLoading == true。
我正在尝试为此构建一个自定义单元格渲染器，但该单元格仅在值更改时重新渲染，而不是在 isLoading 标志更改时重新渲染。

在我的代码流程中，isLoading 标志设置为 true，然后更新值。这会触发渲染方法，单元格现在将显示更新的值和加载微调器。然后将 isLoading 标志设置为 false，但不会再次调用 render 方法，因此单元格继续显示加载微调器。

所以我的问题是，我怎样才能让 cellrenderer 响应props.data那些不是它所显示值的字段的变化？props.data.isLoading在这种情况下，我需要在标志更改时重新渲染单元格。

我正在使用带有 react 和 redux 的 ag-grid v17（并尝试打字稿）。
我的代码看起来与此处的示例非常相似： https ://www.ag-grid.com/react-redux-integration-pt1/

我的单元格渲染器是从本示例中的货币渲染器构建的： https ://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-react-components

注意：我将网格的 deltaRowDataMode 设置为 true，因此它只是重新渲染已更改的数据。

这是我的列定义：

{
    colId: 'value',
    headerName: 'Value',
    field: 'value',  //the property's value on my data structure
    cellRendererFramework: MyCellRenderer
}

这是我的单元格渲染器：

import React from 'react';
import { ICellRendererParams } from 'ag-grid';

interface RendererState {
    currentValue: string;
    isLoading: boolean;
}

export class MyCellRenderer extends React.Component<ICellRendererParams, RendererState> {
    constructor(props: ICellRendererParams) {
        super(props);
        this.state = { currentValue: props.data.value, isLoading: props.data.isLoading };
    }

    //refresh is only called when the value changes, not when params.data.isLoading changes, so render does not get called
    refresh(params: ICellRendererParams) {
        if (params.value !== this.state.currentValue) {
            this.setState({ currentValue: params.value });
        }
        if (params.data.isLoading !== this.state.isLoading) {
            this.setState({ isLoading: params.data.isLoading });
        }
        return true;
    }

    render() {
        var loadingStyle = {
            display: (this.state.isLoading) ? '' : 'none'
        };
        return (
            <div>
                {this.state.currentValue}
                <div className="pull-right">
                    <span className="fa fa-refresh fa-spin" style={loadingStyle}></span>&nbsp;
                </div>
            </div>
        );
    }

}

这也可以使用单元格类或样式，但我也希望能够以类似的方式处理其他事情，例如使用带有按钮的单元格渲染器，并在 isLoading 为时禁用该按钮真的。

更新：
在这里添加了一个工作示例： https ://react-owixbq.stackblitz.io/

4

1 回答 1

0

不要在 refresh() 中更新状态，而是尝试使用componentWillReceiveProps。

    componentWillReceiveProps(nextProps){
        if(nextProps.data.yourField !== this.props.data.yourField){
            this.setState({ isLoading: false, currentValue: nextProps.data.yourField });
        }
    }
于 2018-03-26T18:17:27.327 回答