reactjs - React 和 ag-grid - 如何更新 `getRowClass` 函数？

Question

这是一个演示问题/问题的 StackBlitz:https://stackblitz.com/edit/react-s9l2kj

(这实际上是来自 ag-grid 网站的 Example Row Class Rules 代码的修改版本)

我有一个 getRowClass 函数，当传递给我的组件的属性发生变化时需要更新该函数。在提供的代码示例中，它被传递给 Grid 组件(这里是一个缩减版本):

const Grid = (props) => {
  const getRowClass = (params) => {
    var numSickDays = params.data.sickDays;

    if (numSickDays > props.minDays && numSickDays <= props.maxDays) {
      return 'sick-days-warning';
    };

    return '';
  };

  return (
    <>
      <AgGridReact
        rowData={data}
        columnDefs={columnDefs}
        getRowClass={getRowClass}
      />

      <label>Show warning when: {props.minDays} &lt; sick days &lt;= {props.maxDays}</label>
    </>
  );
}

在 StackBlitz 示例中，正确更新 Min days 文本框中的值会导致标签重新呈现，表明新属性已正确传递到网格。

问题

为什么 getRowClass 函数没有更新？在我看来，AgGridReact 正在缓存传递给它的 getRowClass 的第一个值，而不是在新的 getRowClass 函数时更新它正在创建 - 所以感觉像是一个错误...但是，我可能误解了我应该如何更新 getRowClass 函数。

Answer 1

请尝试在 gridOptions 字段中定义 getRowClass 函数并将其分配给 Ag-grid。

const gridOptions = {
    // all rows assigned CSS class 'my-green-class'
    rowClass: 'my-green-class',

    getRowClass = (params) => {
    if (params.data.sickDays > 8) return 'sick-days-breach';

    var numSickDays = params.data.sickDays;
    if (numSickDays > props.minDays && numSickDays <= props.maxDays) {
      return 'sick-days-warning';
    };

    return '';
  };
}

<AgGridReact
        rowData={data}
        columnDefs={columnDefs}
        getRowClass={getRowClass}
        gridOptions = {gridOptions}
       />