1. تمرير نص كـ Prop
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
// استخدام المكون
<Greeting name="Alice" />
|
شرح: هنا نمرر النص “Alice” كـ prop إلى مكون Greeting ليظهر النص “Hello, Alice!”.
2. تمرير عدد كـ Prop
function Age(props) {
return <p>You are {props.age} years old.</p>;
}
// استخدام المكون
<Age age={25} />
|
شرح: نمرر العدد 25 كـ prop إلى مكون Age ليظهر النص “You are 25 years old.”.
3. تمرير كائن كـ Prop
function User(props) {
return <p>{props.user.name} is {props.user.age} years old.</p>;
}
// استخدام المكون
<User user={{ name: 'Bob', age: 30 }} />
|
شرح: نمرر كائن يحتوي على اسم وعمر المستخدم كـ prop إلى مكون User.
4. تمرير مصفوفة كـ Prop
function ItemList(props) {
return (
<ul>
{props.items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
// استخدام المكون
<ItemList items={['Apple', 'Banana', 'Cherry']} />
|
شرح: نمرر مصفوفة من العناصر كـ prop إلى مكون ItemList ليعرض قائمة بالعناصر.
function Button(props) {
return <button onClick={props.onClick}>Click me</button>;
}
// استخدام المكون
<Button onClick={() => alert('Button clicked!')} />
|
شرح: نمرر دالة كـ prop إلى مكون Button ليتم تنفيذها عند النقر على الزر.
6. استخدام Default Props
function Welcome(props) {
return <h1>Welcome, {props.name}!</h1>;
}
Welcome.defaultProps = {
name: 'Guest'
};
// استخدام المكون بدون تمرير `prop`
<Welcome />
|
شرح: نستخدم defaultProps لتحديد قيمة افتراضية لـ prop إذا لم يتم تمريرها.
7. تمرير Props متعددة
function Profile(props) {
return (
<div>
<h1>{props.name}</h1>
<p>Age: {props.age}</p>
</div>
);
}
// استخدام المكون
<Profile name="Charlie" age={28} />
|
شرح: نمرر props متعددة إلى مكون Profile لعرض الاسم والعمر.
8. تمرير مكونات كـ Props
function Container(props) {
return <div>{props.content}</div>;
}
// استخدام المكون
<Container content={<p>This is a paragraph.</p>} />
|
شرح: نمرر مكونًا كـ prop إلى مكون Container.
9. تمرير Props شرطية
function Status(props) {
return <p>Status: {props.isOnline ? 'Online' : 'Offline'}</p>;
}
// استخدام المكون
<Status isOnline={true} />
|
شرح: نستخدم تعبيرًا شرطيًا داخل المكون بناءً على قيمة prop.
10. تمرير Props باستخدام Destructuring
function Product({ name, price }) {
return (
<div>
<h2>{name}</h2>
<p>Price: ${price}</p>
</div>
);
}
// استخدام المكون
<Product name="Laptop" price={999.99} />
|
شرح: نستخدم destructuring لاستخراج props مباشرة في تعريف المكون.
تعليقات
إرسال تعليق