在 React 中使用 TypeScript 的 AG Grid 自定义单元格渲染器

Posted 2023-03-28

【中文标题】在 React 中使用 TypeScript 的 AG Grid 自定义单元格渲染器

【英文标题】：AGGrid custom CellRenderer with TypeScript in React

【发布时间】：2021-09-13 16:22:32

【问题描述】：

我正在使用带有 TypeScript 的 React，并且我正在尝试在 AGGrid 中使用自定义 CellRenderer。 M 代码如下所示：

PriorityCellRenderer.tsx

import React from 'react';

function PriorityCellRenderer(props:any) 
  const cellValue = props.valueFormatted ? props.valueFormatted : props.value;

  const buttonClicked = () => 
    alert(`$cellValue medals won!`);
  ;

  return (
    <span>
      <span>cellValue</span>&nbsp;
      <button onClick=() => buttonClicked()>Push For Total</button>
    </span>
  );
;

export default PriorityCellRenderer;

const frameworkComponents = 
    'priorityCellRenderer': PriorityCellRenderer
  ;

<AgGridReact
                frameworkComponents=frameworkComponents
                rowData=data
                pagination=true
                onRowClicked=onRowClicked>
                <AgGridColumn field="priority" sortable=true filter=true cellRenderer=priorityCellRenderer ></AgGridColumn>
              </AgGridReact>

当我将鼠标悬停在 AgGridColumn 中的“priorityCellRenderer”上时，它会显示以下内容：

找不到名称“priorityCellRenderer”。你的意思是 'PriorityCellRenderer'?ts(2552) 任意

我知道这是一种 TS 铸造类型的东西，但在这一点上，我有点迷失了：D

有一些提示。

谢谢

【参考方案1】：

将cellRenderer=priorityCellRenderer 更改为cellRenderer="priorityCellRenderer"：

<AgGridColumn field="priority" sortable=true filter=true cellRenderer="priorityCellRenderer" ></AgGridColumn>