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

对于反应，而不是使用cellRenderer，cellEditor等等，你要使用cellRendererFramework，cellEditorFramework并通过在具有类setUp和render方法。

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）中使用（或者用单位替换适当的可用名称）