常见问题

找不到您要找的内容？FAQ 部分解答了一些最常见的问题和挑战。

如果您仍然遇到问题，可以参考支持页面。

如何将 props 传递给 Data Grid 以获得更好的性能？

Data Grid 是一个复杂的组件，会渲染大量元素。作为一般规则，所有非原始类型的 props 都应在渲染之间保持稳定的引用，以避免不必要的重新渲染。

对于 columns prop 尤其重要。列被设计为定义，一旦组件挂载后就永远不要更改。否则，您将面临丢失列宽或顺序等元素的风险。

这可以通过以下方式之一实现

如果列不依赖于组件作用域内的任何内容，则可以在组件外部定义它们并将它们作为 prop 传递。

const columns = [
  { field: 'id' },
  { field: 'firstName' },
  { field: 'lastName' },
  { field: 'age' },
  { field: 'fullName' },
];

function App() {
  return <DataGrid columns={columns} {...other} />;
}

如果列需要组件作用域内的某些内容，例如状态值或 prop，则可以使用 useMemo hook 在渲染之间保持稳定的引用。

function App(props) {
  const renderCell = React.useCallback(
    (params) => {
      return (
        <strong>
          {params.value} {props.someValue}
        </strong>
      );
    },
    [props.someValue],
  );

  const columns = React.useMemo(
    () => [
      { field: 'id' },
      { field: 'firstName' },
      { field: 'lastName' },
      { field: 'age' },
      { field: 'fullName', renderCell },
    ],
    [renderCell],
  );

  return <DataGrid columns={columns} {...other} />;
}

renderCell、valueGetter 和 valueFormatter 之间有什么区别？我应该使用哪一个？

Data Grid 提供了几种自定义单元格内容的方法。它们中的每一个都有不同的用途，应在不同的情况下使用。以下是它们差异的摘要

`renderCell`

它是自定义单元格内容最强大的方法。它允许您在单元格内渲染任何您想要的内容。它是唯一可以在单元格内渲染 React 组件的方法。它也是唯一可以自定义单元格行为（例如，添加点击处理程序）的方法。它是自定义单元格最灵活的方式，但也是最昂贵的方式。只有在其他选项不足时才应使用它。

这是一个显示按钮的单元格的示例

const columns: GridColDef[] = [
  {
    field: 'date',
    headerName: 'Year',
    renderCell: (params: GridRenderCellParams<any, Date>) => (
      <strong>
        {params.value.getFullYear()}
        <Button
          variant="contained"
          size="small"
          style={{ marginLeft: 16 }}
          tabIndex={params.hasFocus ? 0 : -1}
        >
          Open
        </Button>
      </strong>
    ),
  },
];

有关 renderCell 方法的更多信息，请参见渲染单元格部分。

`valueGetter`

它是一个函数，允许您从行数据派生单元格值。它是自定义单元格内容的最有效方法。它也是唯一可以在不更改行数据的情况下自定义单元格值的方法。当您需要从行数据派生单元格值时，应使用它。常见的用例是

转换值（例如，将十进制值转换为百分比值）
从多个字段派生值（例如，连接名字和姓氏）
从嵌套字段派生值（例如 user.address.city）

此值也在 Grid 内部用于筛选、排序和渲染（如果未提供 renderCell 或 valueFormatter）。您可以在值 getter部分了解更多信息。

`valueFormatter`

它是一个函数，允许您格式化单元格值。它可以用于自定义单元格值，而无需更改行数据。当您需要格式化单元格值时，应使用它。

一些常见的用例是

将日期格式化为自定义显示格式
将十进制值格式化为百分比并显示 % 符号
将布尔值格式化为 Yes 或 No

它仅影响渲染部分，不影响内部计算，如筛选或排序。您可以在值 formatter部分了解更多信息。

文档示例中使用的 useDemoData hook 的目的是什么？

useDemoData hook 是 @mui/x-data-grid-generator 包中的一个实用 hook。它包含列定义并为 Data Grid 生成随机数据。它通常在我们的演示中使用，以提供真实的数据，而不会用数据生成逻辑污染代码。

以下是它的使用方法

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function Demo() {
  const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 100 });

  return <DataGrid {...data} />;
}

它带有两个数据集：Commodity 和 Employee。您可以通过传递 UseDemoDataOptions 类型的自定义选项来自定义数据生成。