带有 React-dnd 的 mui 数据网格答案

【问题标题】：mui datagrid with React-dnd带有 React-dnd 的 mui 数据网格
【发布时间】：2022-11-26 07:36:42
【问题描述】：

我曾经有一个 mui treeview，它很容易用 react-dnd 扩展，因为 treeitem 是一个 react 组件。

然而，在数据网格中，行是一个 JSON 对象数组，不再是 React 组件。我有什么办法可以更新数据网格中的“子组件”以使用 dragndrop 增强它吗？

【问题讨论】：

标签： reactjs material-ui datagrid react-dnd

【解决方案1】：

您可以使用 components 道具覆盖默认组件。像这样：

        <DataGrid
          apiRef={apiRef}
          columns={cols}
          rows={rows}
          treeData={typeof treeKey !== "undefined"}
          getTreeDataPath={(row: any) => row[treeKey]}
          groupingColDef={groupingColDef}
          rowsPerPageOptions={[10, 20, 50]}
          pagination={true}
          disableColumnFilter
          experimentalFeatures={{ newEditingApi: true }}
          autoHeight
          editMode="row"
          rowModesModel={rowModesModel}
          onRowModesModelChange={(newModel) => setRowModesModel(newModel)}
          onCellDoubleClick={handleCellDoubleClick}
          onRowEditStart={handleRowEditStart}
          onRowEditStop={handleRowEditStop}
          processRowUpdate={processRowUpdate}
          initialState={{
            pagination: {
              pageSize: 10
            }
          }}
          components={{
            Toolbar,
            NoRowsOverlay,
            Row: DndRow     // this is it in your case
          }}
          componentsProps={{
            toolbar: {
              selectedCellParams,
              richToolbar
            },
            cell: {
              onFocus: handleCellFocus
            },
            row: {
              onContextMenu: handleContextMenu,
              style: { cursor: "context-menu" }
            }
          }}
        />

【讨论】：