Material UI：我可以在 DataGrid 单元格中使用 React 组件而不是预定义的单元格类型（“字符串”、“数字”、“日期”、“日期时间”）吗？

Question

React、Material UI、TypeScript
我想将 React 组件放入DataGrid单元格中。我在这里阅读了有关单元格自定义类型的信息，但它对我没有帮助：它仅允许按字符串格式进行管理，但我需要使用组件而不是字符串。例如我想在单元格中使用Link组件。我的代码：

{ field: 'name', headerName: 'Name', width: 200,
    valueGetter: (params: ValueGetterParams): JSX.Element =>
        (<Link href={this.props.createRecordUrl(params.row.logicalName as EntityNames,
            params.row.id as ID)} target="_blank">{params.row.name}</Link>)
},

但是我得到的是[object Object]字符串而不是Link单元格中的组件。我该如何解决问题？

Answer 1

您可以使用renderCell在列中定义的属性插入自定义组件。查看此链接以获取更多信息：https : //material-ui.com/components/data-grid/columns/

取自 Material UI Docs 的示例：

const columns: GridColDef[] = [
  {
    field: 'date',
    headerName: 'Year',
    renderCell: (params: GridCellParams) => (
      <strong>
        {(params.value as Date).getFullYear()}
        <Button
          variant="contained"
          color="primary"
          size="small"
          style={{ marginLeft: 16 }}
        >
          Open
        </Button>
      </strong>
    ),
  },
];