reactjs - Material -UI : DataGrid/XGrid How to detect density change?

Question

我想在用户更改密度表时更改操作图标大小:
当行较小时，右侧的钢笔图标应更改大小，如下所示:

目前我使用 onStageChange 来捕获表上的所有更改并在组件上设置状态变量

           ...
           const [density, setDensity] = useState<GridDensity>();
           ...
           const actionEdit: GridColDef = {
            field: '',
            type: 'action',
            align: 'right',
            disableColumnMenu: true,
            disableClickEventBubbling: true,
            resizable: false,
            flex: 1,
            headerClassName: 'edit-theme-header',
            cellClassName: 'edit-theme-cell',
            renderCell: () => <EditAction size={density} onClick={() => alert('click')} />
          };
           ... 
           <XGrid
                .....
                onStateChange={(v) => setDensity(v.state.density.value)}
            />

它可以工作，但是所有状态更改(不仅是密度)都会调用 onStateChange。
有没有更好的方法呢？ :)

Answer 1

您可以为图标大小声明另一个状态并在 onStateChange 中更改它.

onStateChange={(v) => {
  setDensity(v.state.density.value);
  // HERE SET ICON SIZE STATE
}

然后，使用该状态值作为图标大小 Prop 。