[英]ag-Grid Cell Rendering - Custom Props
在查看ag-Grid Cell Rendering文檔后,我沒有看到通過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進行此操作?
我知道這已經很晚了。 但你有沒有試過cellRendererParams
與cellRenderer
?
您可以使用它為自定義單元組件設置自定義道具。 例如:
columnDef = [
.......
{
.......
cellRenderer: CustomCellComponent,
cellRendererParams: {
prop1: "this is prop1"
}
}
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.