Question

我想在React中为大多数列使用cellRenderer。所以，在我的colDefs中，我有一个名为unit的附加字段。如果单位存在，我正在尝试使用像我的TableCell React组件中处理的colorMap一样的颜色网格。这个相同的反应组件已经在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

我想出了所需的实施，并认为我将此问题留给未来的用户。似乎需要组件方法，您可以使用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};
        }
    });

然后通过thisRendererParams传递的参数可以通过this.props.params.units在React组件（在我的例子中，ReactTableCellRenderer）中获得（或替换适当的单位可用名称）

Answer 2

2021 年更新

补充@Tom 的回答。您想在列定义中使用 val。举个例子：

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

react grid 的单元格渲染器文档

Answer 3

对于React，您不想使用cellRenderer，cellEditor等，而是使用cellRendererFramework, cellEditorFramework并传入包含setUp和render的类方法

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

3 个答案: