我是新來的反應，并試圖遵循基于打字稿的 CRA 模板
當我定義一個組件時，我使用帶有道具的介面，例如
interface CompProps {
A: string
B: number
}
const Comp = ({A, B} : CompProps): JSX.Element => {\\Some code}
這里的組件只有兩個 props，所以看起來很整潔。然而，我的組件有更多的 props，并且在定義組件時重復 props 名稱的階段讓我感到困擾并添加了許多代碼行。
我很驚訝沒有辦法用類似的東西來定義它：
interface CompProps {
A: string
B: number
}
const Comp = (CompProps): JSX.Element => {\\Some code}
我是否缺少允許這種風格的東西？
謝謝
uj5u.com熱心網友回復：
你只是還不習慣 React 和 TS。不，沒有這樣的語法，也沒有必要。您必須將屬性名稱復制兩次，因為您可能希望保留其中一些名稱，例如：
組件.types.ts
export interface ComponentProps {
age?: number;
name: string;
surname: string;
}
組件.tsx
import { FC } from 'react';
import { ComponentProps } from './Component.types';
const Component = ({ age = 18, name, email } : ComponentProps) => {
return null;
};
/*
or
const Component = ({ email } : ComponentProps) => {
return null;
};
or
const Component = (props : ComponentProps) => {
return null;
};
or
const Component : FC<ComponentProps> = (props) => {
return null;
};
const Component : FC<ComponentProps> = ({ surname }) => {
return null;
};
*/
export default Component;
這是默認的 TS 語法，與普通的 JS TS 函式相同。你不能讓它更短。實際上，手動從 arguments 物件中解構這些屬性更有意義，它為您提供了更多控制權。
我建議你提前學習 TS，然后再學習 React TS，因為這樣對你來說更有意義。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522085.html