React类组件中基于props条件设置AgGrid的cellStyle样式问题求解

AgGrid初始化时不会自动监听外部props的变化，若你绑定的cellStyle依赖的props是异步传入的，AgGrid在props加载完成前就完成了首次渲染，且不会主动触发样式的重新计算，就会出现样式不符合预期的问题。

方案1：等待props加载完成再渲染AgGrid组件 #

• 先判断cellStyle依赖的props是否已经加载完成，只有值存在时才初始化渲染AgGrid，从根源避免提前渲染的问题
• 代码示例：

class YourGridComponent extends React.Component {
  render() {
    // 此处替换为你cellStyle依赖的props字段
    const { userRole } = this.props;
    // 依赖未加载完成时渲染加载态，不初始化AgGrid
    if (!userRole) return <div>加载中...</div>;

    const columnDefs = [
      {
        field: 'status',
        cellStyle: params => {
          return userRole === 'admin' ? { color: 'red' } : { color: 'grey' };
        }
      }
    ];

    return (
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
          columnDefs={columnDefs}
          rowData={this.props.rowData}
        />
      </div>
    );
  }
}

方案2：监听props变化主动触发AgGrid单元格刷新 #

如果业务场景不能延迟渲染AgGrid，可以通过AgGrid的API主动触发单元格刷新，重新计算cellStyle：

• 通过onGridReady事件拿到AgGrid的实例API
• 在类组件的componentDidUpdate生命周期中监听目标props的变化，调用refreshCells方法刷新单元格
• 代码示例：

class YourGridComponent extends React.Component {
  constructor(props) {
    super(props);
    this.gridApi = null;
    this.columnDefs = [
      {
        field: 'status',
        cellStyle: params => {
          // 每次计算都从当前props取最新值，不要提前缓存
          const { userRole } = this.props;
          return userRole === 'admin' ? { color: 'red' } : { color: 'grey' };
        }
      }
    ];
  }

  onGridReady = params => {
    this.gridApi = params.api;
  };

  componentDidUpdate(prevProps) {
    // 监听依赖的props变化
    if (prevProps.userRole !== this.props.userRole && this.gridApi) {
      // 传入force: true强制跳过变化检测，确保所有单元格重新计算样式
      this.gridApi.refreshCells({ force: true });
    }
  }

  render() {
    return (
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
          columnDefs={this.columnDefs}
          rowData={this.props.rowData}
          onGridReady={this.onGridReady}
        />
      </div>
    );
  }
}

方案3：动态更新columnDefs引用触发重渲染 #

将columnDefs放到render方法中定义，或者当props变化时更新columnDefs的引用，AgGrid检测到列定义变化后会自动重新渲染列，同时触发cellStyle重新计算。
该方案会触发列的全量重渲染，列数量较多时性能略低于方案2

内容的提问来源于stack exchange，提问作者employee