props ב-React: העברת נתונים לקומפוננטות עם דוגמאות

props הם הקלטים של קומפוננטת React. הורה מעביר אותם כמאפיינים ב-JSX, <UserCard name="Ada" online={true} />, והילד מקבל אותם כאובייקט אחד, שבדרך כלל עושים לו destructuring בפרמטרים של הפונקציה. props מאפשרים לקומפוננטה אחת להציג נתונים שונים בכל פעם שמשתמשים בה.

function UserCard({ name, role, online }) {
    return (
        <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 10, marginBottom: 8 }}>
            <strong>{name}</strong> <span style={{ color: '#666' }}>{role}</span>
            <div style={{ color: online ? 'green' : '#999' }}>
                {online ? 'Online' : 'Offline'}
            </div>
        </div>
    );
}

export default function App() {
    return (
        <div>
            <UserCard name="Ada Lovelace" role="Engineer" online={true} />
            <UserCard name="Alan Turing" role="Researcher" online={false} />
            <UserCard name="Grace Hopper" role="Admiral" online />
        </div>
    );
}

אותה UserCard מרנדרת שלושה אנשים שונים. שימו לב לאחרון: מאפיין בלי ערך, online, פירושו online={true}. הוסיפו כרטיס רביעי עם השם והתפקיד שלכם.

העברה וקריאה של props

מחרוזת מעבירים במירכאות וכל ערך אחר בסוגריים מסולסלים: מספרים, בוליאנים, מערכים, אובייקטים, פונקציות, ואפילו JSX.

<Product
    title="Desk lamp"
    price={39.5}
    inStock={false}
    tags={['light', 'office']}
    seller={{ name: 'Lumen', rating: 4.8 }}
/>

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

function Product(props) {
    return <h3>{props.title}</h3>;
}

function Product({ title, price, seller }) {
    return <h3>{title}, ${price} from {seller.name}</h3>;
}

שתי הגרסאות מקבלות את אותו אובייקט. destructuring הוא הסגנון הנפוץ, כי אז החתימה של הפונקציה מפרטת בדיוק באילו props הקומפוננטה משתמשת.

ערכי ברירת מחדל

תנו ל-prop ערך ברירת מחדל עם ברירת המחדל של destructuring ב-JavaScript, = value. היא חלה כשההורה לא מעביר את ה-prop, או מעביר undefined. היא לא חלה על null, 0, false או '', שהם ערכים אמיתיים.

function Button({ label = 'Click me', size = 'medium', color = '#2563eb' }) {
    const padding = { small: '2px 8px', medium: '6px 14px', large: '10px 20px' }[size];
    return (
        <button style={{ padding, background: color, color: 'white', border: 0, borderRadius: 6, margin: 4 }}>
            {label} ({String(size)})
        </button>
    );
}

export default function App() {
    return (
        <div>
            <Button />
            <Button label="Save" size="large" />
            <Button label="Undefined" size={undefined} />
            <Button label="Null" size={null} />
        </div>
    );
}

שלושת הכפתורים הראשונים חוזרים לברירות המחדל שלהם כש-prop חסר או undefined. האחרון מעביר null, ולכן size באמת null, והחיפוש לא מוצא padding. שנו את size={null} ל-size="small" כדי לתקן.

קוד ישן קובע ברירות מחדל עם מאפיין סטטי, Button.defaultProps = { size: 'medium' }. React 19 הסירה את defaultProps מקומפוננטות פונקציה: JSX מתעלם ממנו בפונקציה, בלי אזהרה. הוא עדיין עובד בקומפוננטות class. השתמשו בברירות מחדל של destructuring.

העברת פונקציות כ-props

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

import { useState } from 'react';

function Rating({ value, onRate }) {
    return (
        <div>
            {[1, 2, 3, 4, 5].map((n) => (
                <button key={n} onClick={() => onRate(n)} style={{ fontWeight: n === value ? 'bold' : 'normal' }}>
                    {n}
                </button>
            ))}
        </div>
    );
}

export default function App() {
    const [rating, setRating] = useState(0);

    function handleRate(n) {
        console.log('Rating picked a value:', n);
        setRating(n);
    }

    return (
        <div>
            <Rating value={rating} onRate={handleRate} />
            <p>{rating === 0 ? 'Not rated yet' : `You rated it ${rating} out of 5`}</p>
        </div>
    );
}

Rating לא שומרת כלום. היא מציגה את ה-value שהיא מקבלת ומדווחת על לחיצות דרך onRate. ה-state נמצא ב-App, שמעבירה אותו בחזרה מטה. העבירו onRate={setRating} ישירות במקום handleRate וזה עדיין עובד: גם setter הוא פונקציה. העברת state להורה משותף בצורה כזו נקראת הרמת state למעלה.

spread ל-props

כשכבר יש לכם אובייקט שהמפתחות שלו תואמים ל-props של קומפוננטה, פרשו אותו עם {...object} במקום לכתוב כל מאפיין. תחביר ה-rest עושה את ההפך ברשימת הפרמטרים: לוקחים כמה props לפי שם, אוספים את כל השאר ומעבירים הלאה.

function Avatar({ name, color, size }) {
    return (
        <span
            style={{ display: 'inline-grid', placeItems: 'center', width: size, height: size, borderRadius: '50%', background: color, marginInlineEnd: 6 }}
        >
            {name[0]}
        </span>
    );
}

function TextField({ label, ...inputProps }) {
    return (
        <label style={{ display: 'block', marginTop: 10 }}>
            {label} <input {...inputProps} />
        </label>
    );
}

export default function App() {
    const person = { name: 'Ada', color: '#fde68a', size: 40 };

    return (
        <div>
            <Avatar {...person} />
            <Avatar {...person} color="#bbf7d0" />
            <TextField label="Email" type="email" placeholder="you@example.com" maxLength={40} />
        </div>
    );
}

האווטאר השני עושה spread ל-person ואז קובע color: כשאותו prop מופיע פעמיים, האחרון מנצח, ולכן שימו את הדריסות אחרי ה-spread. TextField שומרת את label לעצמה ומעבירה את type, placeholder ו-maxLength ישר ל-<input>. השתמשו ב-spread לעטיפות כמו זו; במקומות אחרים, פירוט מפורש של ה-props מקל לראות מה קומפוננטה מקבלת.

props הם לקריאה בלבד

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

function Counter({ count }) {
    count = count + 1; // wrong: changes a local copy, the parent never sees it
    return <p>{count}</p>;
}

function Profile(props) {
    props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
    return <p>{props.name}</p>;
}

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

import { useState } from 'react';

function Temperature({ celsius }) {
    const fahrenheit = (celsius * 9) / 5 + 32;
    return (
        <p>
            {celsius}°C is {fahrenheit}°F, {celsius >= 25 ? 'warm' : 'cool'}.
        </p>
    );
}

export default function App() {
    const [celsius, setCelsius] = useState(20);

    return (
        <div>
            <input type="range" min={-10} max={40} value={celsius} onChange={(e) => setCelsius(Number(e.target.value))} />
            <Temperature celsius={celsius} />
            <button onClick={() => setCelsius(celsius + 5)}>Warmer</button>
        </div>
    );
}

Temperature אף פעם לא משנה את celsius. היא מחשבת ממנו את fahrenheit בכל רינדור. גררו את הסליידר וה-state של ההורה משתנה, כך שהילד מקבל prop חדש. אם ילד צריך ערך שהוא יכול לשנות בעצמו, הערך הזה הוא state, לא prop.

props מול state

props ו-state הם שניהם ערכי JavaScript רגילים שמשפיעים על מה שקומפוננטה מרנדרת, ושינוי באחד מהם מרנדר את הקומפוננטה מחדש. ההבדל הוא למי שייך הערך.

לעיתים קרובות אותו ערך הוא שניהם. בדוגמת הטמפרטורה שלמעלה, celsius הוא state ב-App ו-prop ב-Temperature. הבעלים מחזיק אותו כ-state ומעביר אותו מטה כ-prop, יחד עם פונקציה לשנות אותו כשילד צריך את זה.

prop יכול להחזיק כל ערך, כולל JSX וקומפוננטות. העברת אלמנט כמו icon={<StarIcon />} מאפשרת להורה למלא "חריץ" בילד, אותו רעיון כמו children עם שם לבחירתכם.

ה-prop children

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

function Panel({ title, children }) {
    return (
        <section style={{ border: '1px solid #ddd', borderRadius: 8, padding: 12, marginBottom: 8 }}>
            <h4 style={{ margin: '0 0 8px' }}>{title}</h4>
            {children}
        </section>
    );
}

export default function App() {
    return (
        <div>
            <Panel title="About">
                <p>Panels can hold any JSX.</p>
            </Panel>
            <Panel title="Links">
                <ul>
                    <li>Props</li>
                    <li>State</li>
                </ul>
            </Panel>
        </div>
    );
}

הדף על children מכסה העברה של כמה חריצים ועבודה בטוחה עם children.

keys הם לא props

key נראה כמו מאפיין, אבל React שומרת אותו לעצמה כדי להתאים פריטי רשימה בין רינדורים. הקומפוננטה אף פעם לא מקבלת אותו:

function Row(props) {
    console.log('Row props.key =', String(props.key), 'props.id =', props.id);
    return <li>{props.label}</li>;
}

export default function App() {
    const fruits = [
        { id: 'a1', label: 'Apple' },
        { id: 'b2', label: 'Banana' },
    ];

    return (
        <ul>
            {fruits.map((fruit) => (
                <Row key={fruit.id} id={fruit.id} label={fruit.label} />
            ))}
        </ul>
    );
}

הקונסול מציג את props.key כ-undefined ואת props.id עם הערך האמיתי. כשילד צריך את המזהה, העבירו אותו פעם שנייה בשם אחר, כמו id כאן. build של פיתוח גם מזהיר כשקוראים את props.key; התצוגה המקדימה רצה כמו build של פרודקשן, אז רואים רק את ה-undefined.