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

【问题标题】：Can a cellRenderer function in ag-Grid return a React component?ag-Grid 中的 cellRenderer 函数可以返回 React 组件吗？
【发布时间】：2017-01-04 10:40:36
【问题描述】：

我想在我的大部分专栏中使用 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} />;
        };
    }
});

【问题讨论】：

标签： javascript reactjs ag-grid ag-grid-react

【解决方案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）中使用（或为单位替换适当的可变名称）

【讨论】：

也想尝试回答这个问题吗？ stackoverflow.com/questions/65702094/…

【解决方案2】：

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

【讨论】：

是的，这突出了 ag-grid 的发展速度。自从我最初发布此内容以来，发生了一些不错的变化。使用刚刚推出的 ag-grid v16，您甚至不需要 cellRendererFramework。在此处查看反应示例：ag-grid.com/javascript-grid-cell-rendering-components
也想尝试回答这个问题吗？ stackoverflow.com/questions/65702094/…

【解决方案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 的单元格渲染器文档

【讨论】：