ag-Grid 中的 cellRenderer 函数可以返回 React 组件吗？

Question

我想在 React 中为我的大多数专栏使用 cellRenderer。 因此，在我的 colDefs 中，我有一个名为 unit 的附加字段。 如果该单元存在，我正在尝试在我的 TableCell 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} />;
        };
    }
});

Answer 1

对于 React，您希望使用cellRendererFramework 、 cellEditorFramework并传入具有setUp和render方法的类，而不是使用cellRenderer 、 cellEditor等。

Answer 2

我想出了所需的实现，并认为我会将这个问题留给未来的用户。 似乎需要组件方法，您可以使用 cellRendererParms 传入其他参数。 然后，在实际的渲染器（下面的 ReactTableCellRenderer）中，你可以通过 this.props.params.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 传递的参数可以通过 this.props.params.units 在 React 组件（在我的例子中是 ReactTableCellRenderer）中使用（或用适当的变量名称替换单位）

Answer 3

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是布尔值，这可以是任何类型，具体取决于您的行模型。

反应网格的单元格渲染器文档