常見問題

找不到您要尋找的內容嗎？常見問題解答部分提供了一些最常見問題和挑戰的解答。

如果您仍然有問題，您可以參考支援頁面。

如何將 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）。您可以在value getter 章節中了解更多資訊。

`valueFormatter`

它是一個函式，允許您格式化儲存格值。它可用於自訂儲存格值，而無需更改列資料。當您需要格式化儲存格值時，應使用它。

一些常見的用例包括

將日期格式化為自訂顯示格式
將小數值格式化為百分比並顯示 % 符號
將布林值格式化為 Yes 或 No

它只影響渲染部分，不影響篩選或排序等內部計算。您可以在value 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 型別的自訂選項來自訂資料產生。