ag-Grid中的cellRenderer函数能返回一个React组件吗?

Can a cellRenderer function in ag-Grid return a React component?

本文关键字：一个 React 组件 cellRenderer 中的 函数 返回 ag-Grid      更新时间：2023-09-26

我想在React中为我的大多数专栏使用cellRenderer。在我的colDefs中，我有一个额外的字段叫做unit。如果单元存在，我试图有一个热图，如颜色网格，这是在我的TableCell React组件处理。这个相同的react组件已经在其他数据网格(如ZippyUI)中工作过。cellRenderer函数可以返回一个React组件，这是一个虚拟DOM对象，或者它必须是一个真正的HTML DOM对象?用ag-Grid的cellRenderer组件方法做这样的事情会更好吗?

colDefs.map((x) => {
    if (x.hasOwnProperty('unit')) {
        x.cellRenderer = (params) => {
            return <TableCell value={params.value} units={x.unit} min={min[x.field]} max={max[x.field]} colorScheme={colorScheme} />;
        };
    }
});

对于React，而不是使用cellRenderer, cellEditor等，您要使用cellRendererFramework, cellEditorFramework并传递一个具有setUp和render方法的类。

我弄清楚了需要的实现，并认为我应该把这个问题留给未来的用户。似乎需要组件方法，您可以使用cellRendererParms传递额外的参数。然后，在实际的渲染器(下面的ReactTableCellRenderer)中，你可以通过this.props.params.units来访问它们(或者用你在对象中传递的任何其他参数来替换units)。

 colDefs.map((x) => {
        if (x.hasOwnProperty('unit')) {
            x.cellRenderer = reactCellRendererFactory(ReactTableCellRenderer);
            x.cellRendererParams = {units: x.unit, min: min[x.field], max: max[x.field], colorScheme: colorScheme};
        }
    });

通过cellRendererParams传递的参数然后在React组件(在我的情况下，ReactTableCellRenderer)中通过this.props.params.units(或为单元替换适当的变量名称)

更新2021

补充@Tom的回答。您希望在列定义中使用cellRendererFramework。下面是一个例子:

import * as React from "react";
import { FontIcon } from "@fluentui/react";
import { ColDef, ColGroupDef } from "ag-grid-community";
const isFavoriteCellRenderer = (params: any) => {
    if (params.value) {
        return (
            <div>
                <FontIcon
                    iconName="FavoriteStarFill"
                    title="Favorite"
                    aria-label="Favorite"
                />
            </div>
        );
    }
    return (
        <div>
            <FontIcon
                iconName="FavoriteStar"
                title="Not favorite"
                aria-label="Not favorite"
            />
        </div>
    );
};
export const getIsFavoriteColumn = (): ColDef | ColGroupDef => ({
    headerName: "isFavorite",
    field: "isFavorite",
    cellRendererFramework: isFavoriteCellRenderer,
});

注意params.value是布尔值，这可以是任何类型，取决于您的行模型。

react grid的单元格渲染器文档

相关文章：