我需要在 Material-ui DataGrid 中渲染 JSX 元素

Question

我需要通过存储在 Object 中的给定字符串有条件地渲染样式化的 div。我传递数据对象 throw props 并通过此函数转换它convertOrdersRows。但这给了我这个错误TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' | property '_context' -> object with constructor 'Object'

const orderColumns = [
  { field: "id", headerName: "ID", width: 120 },
  { field: "date", headerName: "Date", width: 140 },
  { field: "customerName", headerName: "Customer Name", width: 190 },
  { field: "products", headerName: "Products", width: 150 },
  { field: "price", headerName: "Price", width: 90 },
  { field: "status", headerName: "Status", width: 120 },
];

const productColumns = [];

const convertToNormalDate = (date) => {
  const newDate = new Date(date);
  const year = newDate.getFullYear();
  let month = newDate.getMonth() + 1;
  let dt = newDate.getDate();

  if (dt < 10) {
    dt = "0" + dt;
  }
  if (month < 10) {
    month = "0" + month;
  }
  return `${dt}/${month}/${year}`;
};

const convertStatusToIcon = (status) => {
  let statusIcon;

  switch (status) {
    case "Canceled":
      return (statusIcon = <Status label="Canceled" canceled />);
    case "Pending":
      return (statusIcon = <Status label="Pending" pending />);
    case "Deliverd":
      return (statusIcon = <Status label="Deliverd" deliverd />);
    default:
      status = <Status label="..." />;
  }

  return statusIcon;
};

const convertOrdersRows = (rows) => {
  let data = [...rows];

  return data.map((value) => {
    let convertedRow = { ...value };
    convertedRow.date = convertToNormalDate(convertedRow.date);
    convertedRow.status = convertStatusToIcon(convertedRow.status);
    convertedRow.price = `$ ${convertedRow.price}`;
    return convertedRow;
  });
};

const DataGrid = (props) => {
  const classes = useStyles();
  const { orders, products, data } = props;
  const columns = orders ? orderColumns : products ? productColumns : [];
  const rows = convertOrdersRows(data);
  console.log(rows);
  return (
    <MuiDataGrid
      rows={rows}
      columns={columns}
      checkboxSelection
      autoPageSize
      {...props}
    />
  );
};

export default DataGrid;

Answer 1

删除convertOrdersRows并使用renderCellprop，因为它可以访问列中的所有单元格抛出参数，这样您就可以放置您想要的任何逻辑。

const orderColumns = [
  { field: "id", headerName: "ID", width: 120 },
  {
    field: "date",
    headerName: "Date",
    width: 140,
    renderCell: (params) => convertToNormalDate(params.value),
  },
  { field: "customerName", headerName: "Customer Name", width: 190 },
  { field: "products", headerName: "Products", width: 150 },
  {
    field: "price",
    headerName: "Price",
    width: 100,
    renderCell: (params) => `$ ${params.value}`,
  },
  {
    field: "status",
    headerName: "Status",
    width: 120,
    renderCell: (params) => convertStatusToIcon(params.value),
  },
];