如何擴展組件以在 React/TS 中添加默認道具

Question

我想用 React/TS 擴展一個組件（在我的例子中是 @mui/x-data-grid DataGrid），用我自己的應用程序類填充classes屬性。

我第一次嘗試的方法是創建一個組件，例如 CustomDataGrid，如下所示：

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

const CustomDataGrid = (props) => {
  return <DataGrid {...props} classes={{root: 'my-root-class'}} />;
};

export default CustomDataGrid;

問題是我正在使用 typescript 並且我想在 IDE 中保持自動完成的類型能力。

我還嘗試將組件的類型定義為 React.FC<Props>，但請看一下 DataGrid 代碼：

declare const DataGrid: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<Partial<DataGridPropsWithDefaultValues> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue, DataGridForcedPropsKey> & {
    pagination?: true | undefined;
} & React$1.RefAttributes<HTMLDivElement>>>;

我不知道在通用 arguments 中填寫什么來鍵入道具。

有沒有人知道如何在不丟失自動完成功能的情況下做到這一點？

Answer 1

您可以通過使用React.ComponentProps ¹ 實用程序類型來獲取DataGrid的道具的類型，並使用 TypeScript 的Omit從中刪除classes來做到這一點：

import React from "react";
import {DataGrid} from "@mui/x-data-grid";

const CustomDataGrid = (props: Omit<React.ComponentProps<typeof DataGrid>, "classes">) => {
    return <DataGrid {...props} classes={{root: "my-root-class"}} />;
};

這是Omit<Parameters<typeof DataGrid>[0], "classes">的細分：

• typeof DataGrid獲取DataGrid的類型（這是 TypeScript 的typeof ，而不是 JavaScript 的，它只會給我們"function" ）。
• React.ComponentProps<...>為我們提供了一個元組類型，其中依次包含 function 的參數類型。
• Omit<..., "classes">從中刪除classes類型，因為您正在對其進行硬編碼，並且可能不希望人們在使用CustomDataGrid時指定它。

游樂場示例

如果最后一個要點不准確，並且您確實希望允許人們指定類，則可以刪除Omit<..., "classes">部分，但在這種情況下請確保組合任何由指定的props.classes帶有硬編碼的呼叫者； 現在的代碼將用您的代碼覆蓋他們的代碼。 例如，類似：

const myRootClass = "my-root-class";
const CustomDataGrid = (props: React.ComponentProps<typeof DataGrid>) => {
    const classes = props.classes ?? {};
    if (classes.root) {
        classes.root += ` ${myRootClass}`;
    } else {
        classes.root = myRootClass;
    }
    return <DataGrid {...props} classes={classes} />;
};

---

¹ ComponentProps的內聯文檔中有一條注釋說：

注意：如果 ref 被轉發，則首選ComponentPropsWithRef ，如果不支持 refs，則首選ComponentPropsWithoutRef 。

...因此您可能需要其中一個合適的而不是ComponentProps本身。