javascript - ag-Grid 单元格渲染 - 自定义 Prop

Question

在浏览了ag-Grid Cell Rendering documentation之后我没有看到通过 cellRenderFramework 参数将自定义属性添加到单元格渲染器的方法。例如，我想将回调传递给我的自定义渲染器，该渲染器在单击按钮时调用。

class AddCellRenderer extends React.Component<ICellRendererParams, {}> {

  /**
   * Callback handle to pass data to on a click.
   */
  public static callback = (data: MyData): void => { return; };

  public constructor(params: ICellRendererParams) {
    super(params);
  }

  public render() {
    let className = 'pt-button pt-intent-success pt-icon-add';
    let text = 'Click to add';
    if (this.props.data.saved) {
      className = 'pt-button pt-intent-danger pt-icon-remove';
      text = 'Click to remove';
    }
    return (
      <button type="button" onClick={this.onClick} className={className}>{text}</button>
    );
  }

  private onClick = (event: React.FormEvent<HTMLButtonElement>): void => {
    AddCellRenderer.callback(this.props.data);
    this.setState({ ...this.state }); // Make React update the component.
  }
}

我还有另一个像这样使用它的组件

public render() {
  let saveCellRenderer = AddCellRenderer;
  saveCellRenderer.callback = this.onSelectData;
  const columnDefs: ColDef[] = [
    {
      headerName: 'Add to Available Data',
      cellRendererFramework: AddCellRenderer,
    },
    ...
  ];
  ...
  }

除了静态公共(public)方法之外，必须有另一种方法将此回调作为 props 传递，这种方法很丑陋，并且在多个组件使用渲染器时无法正常工作，我该如何使用 ag-Grid 实现这一点？

Answer 1

我知道这已经晚了。但是你试过 cellRendererParams 和 cellRenderer 吗？
您可以使用它为自定义单元格组件设置自定义 Prop 。例如:

columnDef = [
    .......
    {
        .......
        cellRenderer: CustomCellComponent,
        cellRendererParams: {
            prop1: "this is prop1"
        }
    }
]