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

Question

我正在将 React 与 TypeScript 结合使用，并且我正在尝试让自定义 CellRenderer 进入 AGGrid。 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' 上时，它显示以下内容：

Cannot find name 'priorityCellRenderer'. Did you mean 'PriorityCellRenderer'?ts(2552) any

我知道这是一个 TS 铸造类型的东西，但在这一点上我有点迷路了 :D

有人给点提示。

谢谢

Answer 1

将cellRenderer={priorityCellRenderer}改为cellRenderer="priorityCellRenderer":

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

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

AGGrid custom CellRenderer with TypeScript in React

reactjs

typescript

ag-grid

ag-grid-react