Ag grid ag grid CellRenderer-当其他行数据（props.data）更改时如何渲染？

我希望根据绑定到行的

props.data

对象中可用的其他数据以某种方式呈现单元格。但我不知道当其他数据发生变化时，如何让单元格重新渲染

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

我希望网格显示名称和值列，如果

isLoading==true

，
我正试图为此构建一个自定义单元渲染器，但该单元仅在值更改时重新渲染，而不是在isLoading标志更改时

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

所以我的问题是，我如何让cellrenderer响应

props.data

中的更改，这些更改不适用于显示其值的字段？在这种情况下，我需要在

props.data.isLoading

标志更改时重新渲染单元格

我正在使用带有react和redux的ag grid v17（并尝试使用typescript）。
我的代码与这里的示例非常相似：

My cell渲染器是根据本例中的货币渲染器构建的：

注意：我已将网格的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>
        );
    }

}

从“React”导入React；
从“ag网格”导入{ICellRenderParams}；
接口呈现器状态{
currentValue:字符串；
isLoading：布尔值；
}
导出类MyCellRenderer扩展React.Component{
构造函数（道具：IcellRenderParams）{
超级（道具）；
this.state={currentValue:props.data.value，isLoading:props.data.isLoading}；
}
//刷新仅在值更改时调用，而不是在params.data.isLoading更改时调用，因此不会调用render
刷新（参数：IcellRenderParams）{
if（params.value！==this.state.currentValue）{
this.setState（{currentValue:params.value}）；
}
if（params.data.isLoading！==this.state.isLoading）{
this.setState（{isLoading:params.data.isLoading}）；
}
返回true；
}
render（）{
变量加载方式={
显示：（this.state.isLoading）？“”：“无”
};
返回(
{this.state.currentValue}
);
}
}

使用cell类或样式也可以做到这一点，但我还希望能够以类似的方式处理其他事情，例如使用带有按钮的cell渲染器，以及在isLoading为true时禁用该按钮

更新：

---

此处添加了一个工作示例：

请尝试使用，而不是更新refresh（）中的状态

---

你能用你的代码做一个plunker或stackblitz吗抱歉耽搁了-我在帖子底部添加了一个stackblitz示例的链接。我无法在stackblitz上显示网格的主题，但仍然能够重新设置问题，尽管这是一个相当丑陋的显示！嗨，你找到解决办法了吗？@Mohamed Rihan不是真的-我刚离开deltaRowDataMode=false。不幸的是，在我弄明白这一点之前，我不得不转向别的事情。我从来没有机会尝试实现componentWillReceiveProps。如果您找到解决方案，请发布！

    componentWillReceiveProps(nextProps){
        if(nextProps.data.yourField !== this.props.data.yourField){
            this.setState({ isLoading: false, currentValue: nextProps.data.yourField });
        }
    }