reactjs - ما الفرق بين React.HTMLProps<> و React.HTMLAttributes؟

أحاول تحديد واجهة الخصائص لمكوني وأود أن تشمل كل السمات الشائعة.

لكني اكتشفت أن هناك واجهتين مختلفتين يمكنني توسيعهما

واجهة MyProps تمتد من React.HTMLProps<HTMLElement> و واجهة MyProps تمتد من React.HTMLAttributes<HTMLElement>

ما الفرق؟ أي واحد يجب أن أستخدم؟ يبدو أن HTMLProps يشمل HTMLAttributes، هل هذا يعني أن HTMLProps يجب أن يكون الخيار الأفضل؟

الإجابة رقم 1

HTMLProps يحتوي على أشياء أكثر من HTMLAttributes. أشياء مثل ref وما إلى ذلك.

مع ذلك، يُوصى بالنمط التالي (ليكون مطابقًا 1-1 مع أي مكوّن أصلي معيّن 🌹):

interface PrimativeProps extends React.ComponentProps<"div">

الإجابة رقم 2

الآن يجب أن تستخدم ComponentPropsWithoutRef أو ComponentPropsWithRef:

export interface PrimitiveProps extends React.ComponentPropsWithoutRef<'div'> { };

React.HTMLProps أو React.HTMLAttributes فعليًا يستنتجان أنواعًا خاطئة لبعض السمات أو لا يحتويان على جميع القيم الممكنة.

مثال خاطئ مع HTMLProps:

export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {}
export function Button(props: ButtonProps) {
  // ERROR: Type 'string | undefined' is not assignable to type '"button" | "reset" | "submit" | undefined'.
  return <button {...props} />;
}

مثال خاطئ مع HTMLAttributes:

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {}
export function Button(props: ButtonProps) {
  return <button {...props} />;
}

// Error: Property 'type' does not exist on type 'IntrinsicAttributes & ButtonProps'.
<Button type="button">Test</Button>

لمزيد من المعلومات يمكنك قراءة الملخص، القسم "لماذا ليس ComponentProps أو IntrinsicElements أو [Element]HTMLAttributes أو HTMLProps أو HTMLAttributes؟"