React

Props

מהם Props?

Props (קיצור של Properties) הם הדרך להעביר נתונים מקומפוננטת הורה אל קומפוננטת ילד. הם מתפקדים בדיוק כמו פרמטרים של פונקציה: אותה קומפוננטה יכולה להציג תוכן שונה בכל פעם, בהתאם ל-props שהיא מקבלת. כך הופכים קומפוננטה סטטית לקומפוננטה גמישה וניתנת לשימוש חוזר.

// בלי Props - קומפוננטה סטטית
function Greeting() {
    return <h1>שלום דני!</h1>;
}

// עם Props - קומפוננטה דינמית
function Greeting(props) {
    return <h1>שלום {props.name}!</h1>;
}

// שימוש
<Greeting name="דני" />
<Greeting name="רונית" />
<Greeting name="משה" />

העברת Props

טיפוסים בסיסיים

function UserCard(props) {
    return (
        <div className="card">
            <h2>{props.name}</h2>
            <p>גיל: {props.age}</p>
            <p>עיר: {props.city}</p>
        </div>
    );
}

// שימוש
<UserCard name="דני" age={25} city="תל אביב" />
<UserCard name="רונית" age={30} city="ירושלים" />

Destructuring (מומלץ!)

// במקום props.name, props.age...
function UserCard({ name, age, city }) {
    return (
        <div className="card">
            <h2>{name}</h2>
            <p>גיל: {age}</p>
            <p>עיר: {city}</p>
        </div>
    );
}

סוגי Props

מחרוזות (Strings)

// מחרוזות בגרשיים
<Button text="לחץ עליי" />
<Title message="ברוכים הבאים" />

מספרים (Numbers)

// מספרים בסוגריים מסולסלים
<Counter initial={0} />
<Product price={99.99} quantity={3} />

בוליאנים (Booleans)

// true - מספיק לכתוב את השם
<Button disabled />
<Modal isOpen />

// false - צריך לציין במפורש
<Button disabled={false} />
<Modal isOpen={false} />

מערכים ואובייקטים

const colors = ['אדום', 'ירוק', 'כחול'];
const user = { name: 'דני', age: 25 };

<ColorList colors={colors} />
<Profile user={user} />

פונקציות

function handleClick() {
    alert('לחצת!');
}

<Button onClick={handleClick} />

Children Props

children הוא prop מיוחד שמכיל את כל מה שנכתב בין תגית הפתיחה לתגית הסגירה של הקומפוננטה. הוא מאפשר לבנות קומפוננטות "עוטפות" גמישות, כמו כרטיס או חלון קופץ, שלא יודעות מראש איזה תוכן ייכנס אליהן:

function Card({ children, title }) {
    return (
        <div className="card">
            <h2>{title}</h2>
            <div className="card-content">
                {children}
            </div>
        </div>
    );
}

// שימוש
<Card title="כותרת">
    <p>זה התוכן שבפנים!</p>
    <button>כפתור</button>
</Card>

<Card title="כותרת אחרת">
    <ul>
        <li>פריט 1</li>
        <li>פריט 2</li>
    </ul>
</Card>

Default Props

לעיתים נרצה שלקומפוננטה יהיה ערך התחלתי סביר גם כשההורה לא מעביר prop מסוים. לשם כך מגדירים ערכי ברירת מחדל. הדרך המומלצת כיום היא לקבוע אותם ישירות ב-destructuring:

שיטה 1: Destructuring עם ברירת מחדל

function Button({ text = "לחץ", color = "blue", size = "medium" }) {
    return (
        <button className={`btn btn-${color} btn-${size}`}>
            {text}
        </button>
    );
}

// שימוש
<Button />                          // text="לחץ", color="blue", size="medium"
<Button text="שמור" />              // text="שמור", color="blue", size="medium"
<Button text="מחק" color="red" />   // text="מחק", color="red", size="medium"

שיטה 2: defaultProps (ישן יותר)

function Button({ text, color, size }) {
    return (
        <button className={`btn btn-${color} btn-${size}`}>
            {text}
        </button>
    );
}

Button.defaultProps = {
    text: "לחץ",
    color: "blue",
    size: "medium"
};

Spread Operator עם Props

const buttonProps = {
    text: "לחץ",
    color: "blue",
    onClick: handleClick,
    disabled: false
};

// במקום לכתוב כל prop בנפרד
<Button text={buttonProps.text} color={buttonProps.color} ... />

// אפשר להשתמש ב-spread
<Button {...buttonProps} />

// שילוב: spread + override
<Button {...buttonProps} color="red" />  // color יהיה "red"

Props הם Read-Only

עיקרון חשוב ב-React: אסור לשנות את ה-props בתוך הקומפוננטה שמקבלת אותם. ה-props שייכים להורה, והקומפוננטה מקבלת אותם לקריאה בלבד. שמירה על העיקרון הזה היא מה שהופך את זרימת הנתונים לצפויה וקלה למעקב:

function Counter({ count }) {
    // ❌ שגיאה! אי אפשר לשנות props
    count = count + 1;

    return <p>ספירה: {count}</p>;
}

כשצריך ערך שמשתנה לאורך זמן בתוך הקומפוננטה עצמה, משתמשים ב-State - הנושא של השיעור הבא.

העברת Props בשרשרת

// App -> Header -> Logo

function App() {
    const logoSrc = "/logo.png";
    return <Header logo={logoSrc} />;
}

function Header({ logo }) {
    return (
        <header>
            <Logo src={logo} />
            <nav>...</nav>
        </header>
    );
}

function Logo({ src }) {
    return <img src={src} alt="לוגו" />;
}

💡 טיפ: העברת אותו prop דרך רמות רבות (תופעה שמכונה Props Drilling) הופכת את הקוד למסורבל. במקרים כאלה שקלו להשתמש ב-Context API, שנלמד בהמשך.

סיכום

הקודם: ← קומפוננטות
הבא: State →