我知道添加复选框或文本字段的方法是使用 renderCell 并且它有效，我可以看到复选框：
但是，我不明白应该如何单独控制每一行的复选框/文本字段。例如，如果我希望第 1 行具有 TextField 的“填充”变体，而第 2 行具有“轮廓”变体，该怎么办？
import * as React from "react";
import {DataGrid} from "@mui/x-data-grid";
import {Box, Checkbox, TextField} from "@mui/material";
const columns = [
{field: "id", headerName: "ID", width: 30},
{field: "col1", headerName: "Column 1", width: 150},
{field: "col2", headerName: "Column 2", width: 150},
{field: "col3", headerName: "Column 3", width: 150, renderCell: (params) => <Checkbox />},
];
const rows = [
{id: 1, col1: "Example", col2: "Content", col3: ??????},
{id: 2, col1: "Example", col2: "Content", col3: ??????},
{id: 3, col1: "Example", col2: "Content", col3: ??????},
];
export default function Table() {
return (
<Box sx={{}}>
<DataGrid rows={rows} columns={columns} />
</Box>
);
}
我尝试添加一个新的 <Checkbox /> ，其中包含诸如 <Checkbox defaultChecked/> 之类的道具，但当然，这是行不通的。
请看一下我为您提供的示例。希望我能回答你的问题。 https://codesandbox.io/s/optimistic-leaf-xm32lk ?file=/Demo.tsx
import * as React from "react"; import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid"; import Checkbox from "@mui/joy/Checkbox"; function RenderCheckBox(props: GridRenderCellParams<any, boolean>) { const [checked, setChecked] = React.useState(props.value); // Initiated react binded value with param from `rows` // Handler for user clicks to set checkbox mark or unset it const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { setChecked(event.target.checked); }; //The bind for dynamic mark/unmark: checked={checked} //The handler for user clicks: onChange={handleChange} return ( <Checkbox label="some text" size="lg" checked={checked} onChange={handleChange} /> ); } const columns: GridColDef[] = [ { field: "id", headerName: "ID", width: 30 }, { field: "col1", headerName: "Column 1", width: 150 }, { field: "col2", headerName: "Column 2", width: 150 }, { field: "checked", headerName: "Column 3", width: 150, renderCell: RenderCheckBox } ]; // Here 'checked' field will pass the param to component. const rows = [ { id: 1, col1: "Example", col2: "Content", checked: true }, { id: 2, col1: "Example", col2: "Content", checked: false }, { id: 3, col1: "Example", col2: "Content", checked: false } ]; export default function RenderCellGrid() { return ( <div style={{ height: 300, width: "100%" }}> <DataGrid rows={rows} columns={columns} /> </div> ); }