مشروع: Props مكوّن

Component Props Lab

مشروع ~22 دقيقة

مشروع: Props مكوّن — Component Props Lab

حتى لو لم تستخدم إطاراً محدداً، فكرة props مهمة: بيانات تدخل إلى وحدة عرض. صمم LessonCardProps يحتوي title وminutes وdifficulty. ثم اكتب دالة renderLabel ترجع نصاً مختصراً. في React ستكون props هي معامل المكوّن، وفي vanilla UI قد تكون object تمرره لدالة render.

الهدف أن تكون واجهة المكوّن واضحة. لا تجعل المكوّن يعرف شكل course كامل إذا كان يحتاج title فقط. مرر أقل ما يكفي.

نموذج props

index.ts

type Difficulty = "beginner" | "intermediate" | "advanced";

type LessonCardProps = {
  title: string;
  minutes: number;
  difficulty: Difficulty;
};

function renderLabel(props: LessonCardProps): string {
  return `${props.title} - ${props.minutes} min - ${props.difficulty}`;
}

console.log(renderLabel({ title: "Props", minutes: 22, difficulty: "intermediate" }));

Output:

إذا أضفت difficulty جديدة لاحقاً، سيظهر أثرها في الأماكن التي تستخدم النوع.

تحدي — Challenge

type Props = { title: string; minutes: number };

function label(props: Props): string {
  /* TODO */
  return ""; // أرجع title:minutes — Return title:minutes
}

console.log(label({ title: "Props", minutes: 22 }));