ריאקט – לעבוד עם קומפוננטה עם פרמטרים

במאמר הקודם יצרנו קומפוננטה. אבל קומפוננטה קצת פשוטה. כזו שלא מקבלת פרמטרים. אנחנו רוצים קומפוננטה שמקבלת פרמטרים! למה? כי בדיוק כמו שלאלמנט HTML יש תכונות (תחשבו על href ועל title באלמנט a) אז גם בקומופננטה שלנו נצטרך פרמטרים. רוצים דוגמה? בטח שאתם רוצים. בואו נשתמש בקומופננטה המטופשת שיצרנו במאמר הקוד. בקומפוננטה ההיא הדפסנו hello world. בואו ונגרום ל-world להיות פרמטר.

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>My first react app and component</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
 
<body>
    <div id="content"></div>
    <script type="text/babel">
        class Hello extends React.Component {
            render() {
                return <p>Hello {this.props.target}!!</p>
            }
        }
        const target = document.getElementById('content');
        ReactDOM.render(
        <Hello target='world'/>,
        target
        );
    </script>
</body>
</html>

את הפרמטר אנחנו מעבירים לקומפוננטה שלנו, שקוראים לה עכשיו hello, כמו שאנחנו מעבירים כל פרמטר לכל קומפוננטה. הכי כיף וקל בעולם. איך אנחנו משתמשים בפרמטר? אנחנו ניגשים אל this.props.target. במקרה הזה החלטתי לקרוא לפרמטר target, אז אני ניגש אליו באמצעות this.props.target. אבל אם אני ארצה לקרוא לו name למשל, אני אגש אליו באמצעות this.props.name. ומה אלו הסוגריים המסולסלות האלו? זה חלק מה-JSX. כל מה שיש בתוכם מתרנדר כאילו הוא טקסט. במקרה הזה, כל מה שיש ב-this.props.target. אני יכול להכניס במקום ה-world כל מה שבא לי. אם אני אכניס {1+1} אני אקבל שם 2. כל ביטוי בג׳אווהסקריפט יודפס שם. נסו ותהנו. רואים סוגריים מסולסלות? מה שיש שם רץ. פשוט מאוד.

ילדים

ומה קורה עם ילדים? כלומר אם יש לי קומפוננטה שעוטפת טקסט. איך אני יכול לגשת אליו? אה, גם זה קל: באמצעות {this.props.children}. כך למשל אני יכול לקחת את כל מה שהקומפוננטה עוטפת ולהשתמש בו בקומופננטה שלי. דוגמה? בטח, יותר פשוט עם דוגמה.

class Hello extends React.Component {
  render() {
    return <p>{this.props.children} {this.props.target}!</p>
  }
}

const target = document.getElementById('content');
ReactDOM.render(
  <div>
    <Hello target="World"><strong>Hello</strong></Hello>
    <Hello target="Mars"><strong>Goodbye</strong></Hello>
  </div>,
  target
);

מה הולך פה? באמצעות this.props.children אני לוקח את כל מה שהקומפוננטה Hello עוטפת. במקרה אחד זה ><strong>Hello</strong> ובמקרה שני זה <strong>Goodbye</strong> ומשתמש בהם בקומפוננטה שלי. במקרה הזה פשוט מדפיס את זה ליד ה-target.

הנה, כאן ניתן לשחק עם זה.

See the Pen React first component with attributes and children by Ran Bar-Zik (@barzik) on CodePen.

שימו לב שמדובר בג׳אווהסקריפט מוחלט, אז אני יכול לשחק עם הילדים או עם ה-target כמה שבא לי. ה-class יכול להכיל כמה מתודות שבא לי ואני יכול לקרוא להן כרצוני. מה שחשוב באמת בקומפוננטות כאלו הוא מה שה-render מחזירה.

class Hello extends React.Component {
  render() {
    return <p>{this.getChildren();} {this.props.target}!</p>
  }
  getChildren() {
    return this.props.children;
  }
}

const target = document.getElementById('content');
ReactDOM.render(
  <div>
    <Hello target="World"><strong>Hello</strong></Hello>
    <Hello target="Mars"><strong>Goodbye</strong></Hello>
  </div>,
  target
);

כמובן שאין בעיה לקומפוננטה אחת להכנס לתוך קומפוננטה שניה, הנה, בדוגמה הזו למשל, קומפוננטת Hello מכילה בתוכנה את קומפוננטת World:

class World extends React.Component {
  render() {
    return <span>World!</span>
  }
}

class Hello extends React.Component {
  render() {
    return <div>{this.props.children} <World />!</div>
  }
}

const target = document.getElementById('content');
ReactDOM.render(
  <div>
    <Hello>Hello</Hello>
    <Hello>Goodbye</Hello>
  </div>,
  target
);

מה שיש פה בגדול זה הצהרה על שתי קומפוננטות. אחת World והשניה Hello. קומפוננטת Hello קוראת ל-World. כן, זה עד כדי כך פשוט. ברגע שהצהרתי על קומפוננטה, אני יכול להשתמש בה בכל מקום. בין אם ב-JSX של קומפוננטה אחת או ישירות באפליקציה (כלומר ב-ReactDOM.render). בפועל המון המון קומפוננטות כוללות שימוש בקומפוננטות אחרות, אז זה ממש לא איזוטרי. זה חלק משמעותי מ׳אבני הלגו׳ של ארכיטקטורת הקומפוננטות. כל קומפוננטה יכולה להכיל קומפוננטות אחרות שבתורן מכילות קומפוננטות אחרות וכך הלאה. אפשר ורצוי לשחק עם זה:

See the Pen React first component with attributes and children and a little bit of JS by Ran Bar-Zik (@barzik) on CodePen.

במאמר הבא נדבר על עיצוב קומפוננטות

⚠️אם אהבת את המדריכים על ריאקט – יש ספר מקיף ושלם על ריאקט שכתבתי בשם ללמוד ריאקט בעברית, במסגרת פרויקט עם חברות מובילות ומפתחים אחרים. בספר יש פירוט מקיף יותר על ריאקט ותרגילים רבים ללימוד עצמי.