AG-網格單元格渲染 - 自定義道具

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, 
    }, 
    ... 
    ]; 
    ... 
    } 

必須有另一種方式來傳遞這個回調是不是這是醜陋的靜態公共方法等道具，並不會多，當工作組件使用渲染器，我該如何使用ag-Grid做這件事？

Answer 1

我知道這是遲到了。但你有沒有試過cellRendererParams與cellRenderer？
你可以用它來定製電池組件設置自定義道具。例如：

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