cellRenderer 可以在 ag-Grid return React 组件中运行吗？

Question

我想在我的大部分专栏中使用 React 中的 cellRenderer。因此，在我的 colDef 中，我有一个名为 unit 的附加字段。如果该单元存在，我将尝试在我的 TableCell React 组件中处理类似颜色网格的热图。这个相同的 React 组件已经在 ZippyUI 等其他数据网格中工作。 cellRenderer 可以 return 一个 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

我想出了所需的实现，并想把这个问题留给未来的用户。似乎需要组件方法，您可以使用 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 2

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

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

react grid

的单元格渲染器文档

cellRenderer 可以在 ag-Grid return React 组件中运行吗？

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

javascript

reactjs

ag-grid

ag-grid-react