我想用 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;
問題是我正在使用打字稿，我想保持在 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>>>;
我不知道如何填寫通用引數來鍵入道具。
有沒有人知道如何在不丟失自動完成功能的情況下做到這一點？
uj5u.com熱心網友回復：
您可以通過使用React.ComponentProps1 實用程式型別來獲取 的道具的型別DataGrid，并Omit從中洗掉TypeScript來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<...>給我們一個元組型別，按順序排列函式的引數型別。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} />;
};
1 行內檔案中有一條注釋ComponentProps說：
注意：
ComponentPropsWithRef如果 ref 被轉發，或者ComponentPropsWithoutRef不支持 refs ，則更喜歡。
...所以你可能想要其中一個合適的而不是ComponentProps它本身。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/409691.html
標籤：
上一篇：回傳非空陣列