Reactjs 如何在 MUI 数据网格中的 renderCell 组件之间传递状态

当另一个Select组件使用DataGrid更改时，如何更改一个Select组件的MenuItems？我需要能够将一个Select组件的状态传递给另一个组件，但在使用renderCell时我不确定如何传递.

例如，假设我有以下对象:

const data = {
  "/path/to/file1.csv": {
    parameters: ["Parameter 1", "Parameter 2", "Parameter 3"],
  },
  "/path/to/file2.csv": {
    parameters: ["Parameter 2", "Parameter 3", "Parameter 4"],
  },
  "/path/to/file3.csv": {
    parameters: ["Parameter 5", "Parameter 6", "Parameter 7"],
  },
};

在我的DataGrid表中，每次我通过单击按钮添加新行时，第一个单元格都有一个包含Object.keys(data)的Select组件.

第二个单元格包含另一个Select分量.我希望这个Select组件包含依赖于所选值的参数.例如，如果 Select /path/to/file1.csv，我想使这些参数可用(Parameter 1, Parameter 2, Parameter 3)，但如果 Select /path/to/file3.csv，我想使那些参数可用(Parameter 5, Parameter 6, Parameter 7).

以下是我的组件:

import * as React from "react";
import PropTypes from "prop-types";
import { Button, Select, MenuItem } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import { DataGrid, GridActionsCellItem } from "@mui/x-data-grid";

const FileSelect = (props) => {
  const { value } = props;
  const [file, setFile] = React.useState("");

  const handleChange = (event) => {
    setFile(event.target.value);
  };

  return (
    <Select id="file-select" value={file} onChange={handleChange} fullWidth>
      {value?.map((item, index) => (
        <MenuItem key={index} value={item}>
          {item}
        </MenuItem>
      ))}
    </Select>
  );
};

FileSelect.propTypes = {
  value: PropTypes.array,
};

const ParameterSelect = (props) => {
  const { value } = props;
  const [parameter, setParameter] = React.useState("");

  const handleChange = (event) => {
    setParameter(event.target.value);
  };

  return (
    <Select
      id="parameter-select"
      value={parameter}
      onChange={handleChange}
      fullWidth
    >
      {value?.map((item, index) => (
        <MenuItem key={index} value={item}>
          {item}
        </MenuItem>
      ))}
    </Select>
  );
};

export default function DataGridTable(props) {
  const { data } = props;
  const files = Object.keys(data);

  const [rows, setRows] = React.useState([]);

  const columns = [
    {
      field: "file",
      headerName: "File",
      // width: 200,
      flex: 1,
      renderCell: FileSelect,
    },
    {
      field: "x",
      headerName: "X",
      // width: 200,
      flex: 0.5,
      renderCell: ParameterSelect,
    },
    {
      field: "actions",
      headerName: "Delete",
      type: "actions",
      width: 80,
      getActions: (params) => [
        <GridActionsCellItem
          icon={<DeleteIcon />}
          label="Delete"
          onClick={deleteRow(params.id)}
        />,
      ],
    },
  ];

  const handleClick = () => {
    const newRow = {
      id: rows.length + 1,
      file: files,
      x: [],
    };
    setRows((prevState) => [...prevState, newRow]);
  };

  const deleteRow = React.useCallback(
    (id) => () => {
      setTimeout(() => {
        setRows((prevRows) => prevRows.filter((row) => row.id !== id));
      });
    },
    []
  );

  return (
    <div>
      <Button variant="contained" onClick={handleClick}>
        Add row
      </Button>
      <div style={{ height: 300, width: "100%" }}>
        <DataGrid rows={rows} columns={columns} disableSelectionOnClick />
      </div>
    </div>
  );
}