Javascript ag网格单元渲染-自定义道具

查看后，我没有看到通过

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.
  }
}

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

---

必须有另一种方法将此回调作为道具传递，而不是静态公共方法。静态公共方法很难看，并且在多个组件使用渲染器时不起作用。如何使用ag Grid进行此操作？

我知道这已经晚了。但是您是否使用

cellRenderer

尝试了

CellRenderParams

？

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

您可以使用它为自定义单元组件设置自定义道具。例如：

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

---

最终使用高阶组件来帮助解决此问题。只需添加，您仍然可以使用CellRenderParams中定义的现有参数，如

value

和

data

。只需要在道具定义中找到它们。相关文档和。请注意，对于headerComponentFramework渲染器，您需要通过。一旦添加了

CellRenderParams

，如何在

CustomCellComponent

中访问它们？请提供帮助。@StangSpree它应该在CustomCellComponent的props（props.prop1）中提供。@IshworTimilsina使用它您可以为这些props交换状态更改吗？