ما هي الـ Props؟

إعادة استخدام المكون أمر رائع، لكن ثلاث نجوم متطابقة ليست مفيدة للغاية. تتيح لك الخاصيات (Props) تمرير البيانات إلى المكون، بحيث يمكن لكل نسخة أن تكون مختلفة:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

يحدث أمران هنا:

• التمرير: تبدو الخصائص (props) مثل السمات: name="Ada"
• الاستلام: يستخرجها المكون في قائمة المعاملات الخاصة به ({ name }) ويستخدمها داخل JSX مثل أي متغير آخر

المكون نفسه، وبيانات مختلفة، ومخرجات مختلفة: Hello, Ada! و Hello, Alan!. الخصائص (Props) هي الطريقة التي تُهيئ بها المكونات الآباء مكوناتها الأبناء.