mui 数据网格与 React-dnd

Question

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

然而，在数据网格中，行是 JSON 对象的数组，不再是 React 组件。 有什么方法可以让我更新数据网格中的“子组件”以通过拖放来增强它？

Answer 1

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

<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" }
        }
    }}
/>