Material-UI : DataGrid/XGrid 如何检测密度变化？答案

【问题标题】：Material-UI : DataGrid/XGrid How to detect density change?Material-UI : DataGrid/XGrid 如何检测密度变化？
【发布时间】：2021-03-03 13:55:59
【问题描述】：

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

目前我使用 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（不仅是密度）。有更好的方法吗？ :)

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以声明图标大小的另一个状态并在 onStateChange 内更改它。

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

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

【讨论】：

感谢您的回复，但我的问题不存在。 'setDensity' 将在网格上的所有事件中调用，不仅在密度变化时。它并没有真正优化:)
这很有帮助，我稍微改了一下，效果很好

【解决方案2】：

我的解决方案基于@mdmundo 的回答。

...
const [density, setDensity] = useState<GridDensity>('compact');
...
<XGrid
    ...
    className={density === 'compact' ? 'compact' : ''}
    onStateChange={v => density !== v.state.density.value && setDensity(v.state.density.value)}
/>

一点风格：

.MuiXGrid-root.compact {
   /* some style */
}

【讨论】：