Javascript 在DataGrid中反应物料UI添加链接

我正在使用MaterialUI中的

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;

import React，{useffect}来自“React”；
从'react redux'导入{useDispatch，useSelector}；
从'@material ui/core/styles'导入{makeStyles}；
进口{
数据网格，
网格容器，
GridColumnStoolbutton，
GridFilterToolbarButton，
}来自“@物料界面/数据网格”；
从“@material ui/core”导入{Container，background，CircularProgress}；
从“react router dom”导入{重定向，链接}；
从“../actions/formActions”导入{getAllForms}；
从“../layout/Message”导入消息；
从“@material ui/icons/ArrowRightAlt”导入ArrowRightAltIcon；
const useStyles=makeStyles（（主题）=>({
容器：{}，
背景：{
zIndex:'10'，
},
数据网格：{
宽度：“100%”，
},
}));
函数CustomToolbar（）{
返回(
);
}
常量列=[
{字段：'id'，标题名称：'id'，宽度：70}，
{字段：'name'，标题名称：'name'}，
{字段：'cellnumber'，标题名称：'cellnumber'，宽度：150}，
{
字段：“类型”，
headerName:'类型'，
宽度：150，
},
{
字段：“品牌”，
标题名称：“品牌”，
宽度：150，
},
{
字段：'价格'，
标题名称：“价格”，
宽度：150，
},
{
字段：“状态”，
headerName:“状态”，
宽度：150，
},
{
字段：“createdAt”，
headerName:“createdAt”，
宽度：150，
},
{
字段：“链接”，
headerName:'链接'，
宽度：150，
},
];
常数形式=（）=>{
const classes=useStyles（）；
const dispatch=usedpatch（）；
const userDetails=useSelector（（state）=>state.userDetails）；
常数{
用户信息，
加载：加载详细信息，
错误：错误详细信息，
}=用户详细信息；
const formGetAll=useSelector（（state）=>state.formGetAll）；
const{forms，loading:loadingForms，error:errorForms}=formGetAll；
useffect（（）=>{
调度（getAllForms（））；
}，[发送]；
如果（！userInfo）{
返回；
}
设rows2=[]；
for（设x为形式）{
让rowItem={}；
rowItem.id=表格[x]。\u id；
rowItem.name=forms[x].name；
rowItem.cellnumber=表格[x].cellnumber；
rowItem.type=forms[x].type；
rowItem.brand=表格[x]。品牌；
rowItem.price=表格[x]。价格；
rowItem.status=表单[x]。状态；
rowItem.createdAt=forms[x].createdAt；
rowItem.link=链接；
rows2.推送（rowItem）；
console.log（rows2.link）；
}
返回(
{errorForms&&}
{加载表单(
) : (
)}
);
};
导出默认表格；

如果要呈现自定义React组件而不是普通字符串，则可以覆盖列定义中的

renderCell

方法。见第节

{
字段：“电子邮件”，
标题名称：“电子邮件”，
宽度：300，
renderCell：（参数）=>(
{params.value}
)
}

现场演示

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