javascript - React Material-UI 在 DataGrid 中添加链接

Question

我正在使用 Material-UI 中的 DataGrid，我想将链接应用到每一行的末尾。
但它显示如下:( [object Object] )

我希望它像记录的 123456789 id 一样显示，并成为 /form/123456789 的链接...
我使用来自 react-router-dom 的 Link 但我无法弄清楚我缺少什么或 DataGrid 组件不是最合适的......我只想在每一行的末尾添加一个链接
到目前为止，这是我尝试做的；

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import {
  DataGrid,
  GridToolbarContainer,
  GridColumnsToolbarButton,
  GridFilterToolbarButton,
} from '@material-ui/data-grid';
import { Container, Backdrop, CircularProgress } from '@material-ui/core';
import { Redirect, Link } from 'react-router-dom';
import { getAllForms } from '../actions/formActions';
import Message from '../layout/Message';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';

const useStyles = makeStyles((theme) => ({
  container: {},
  backdrop: {
    zIndex: '10',
  },
  datagrid: {
    width: '100%',
  },
}));

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridColumnsToolbarButton />
      <GridFilterToolbarButton />
    </GridToolbarContainer>
  );
}

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name' },
  { field: 'cellnumber', headerName: 'Cell Number', width: 150 },
  {
    field: 'type',
    headerName: 'Type',
    width: 150,
  },
  {
    field: 'brand',
    headerName: 'Brand',
    width: 150,
  },
  {
    field: 'price',
    headerName: 'Price',
    width: 150,
  },
  {
    field: 'status',
    headerName: 'Status',
    width: 150,
  },
  {
    field: 'createdAt',
    headerName: 'createdAt',
    width: 150,
  },
  {
    field: 'link',
    headerName: 'link',
    width: 150,
  },
];

const Forms = () => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const userDetails = useSelector((state) => state.userDetails);
  const {
    userInfo,
    loading: loadingDetails,
    error: errorDetails,
  } = userDetails;
  const formGetAll = useSelector((state) => state.formGetAll);
  const { forms, loading: loadingForms, error: errorForms } = formGetAll;

  useEffect(() => {
    dispatch(getAllForms());
  }, [dispatch]);

  if (!userInfo) {
    return <Redirect to='/login'></Redirect>;
  }

  let rows2 = [];
  for (let x in forms) {
    let rowItem = {};
    rowItem.id = forms[x]._id;
    rowItem.name = forms[x].name;
    rowItem.cellnumber = forms[x].cellnumber;
    rowItem.type = forms[x].type;
    rowItem.brand = forms[x].brand;
    rowItem.price = forms[x].price;
    rowItem.status = forms[x].status;
    rowItem.createdAt = forms[x].createdAt;
    rowItem.link = <Link to={`${forms[x]._id}`}>Link</Link>;

    rows2.push(rowItem);
    console.log(rows2.link);
  }

  return (
    <Container className={classes.container} maxWidth='lg'>
      <div style={{ height: 400, width: '100%' }}>
        {errorForms && <Message variant='error' message={errorForms}></Message>}
        {loadingForms ? (
          <Backdrop open={true} className={classes.backdrop}>
            <CircularProgress></CircularProgress>
          </Backdrop>
        ) : (
          <DataGrid
            rows={rows2}
            columns={columns}
            pageSize={5}
            className={classes.datagrid}
            components={{ Toolbar: CustomToolbar }}
            density='comfortable'
          />
        )}
      </div>
    </Container>
  );
};

export default Forms;

Answer 1

您可以覆盖 renderCell如果要呈现自定义 React 组件而不是纯字符串，请在列定义中使用方法。见 render cell部分。

{
  field: "email",
  headerName: "Email",
  width: 300,
  renderCell: (params) => (
    <Link to={`/form/${params.value}`}>{params.value}</Link>
  )
}

现场演示