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是布爾值，這可以是任何類型，具體取決於您的行模型。

反應網格的單元格渲染器文檔