לימוד React
תיאור ה-UI

JavaScript ב-JSX עם סוגרים מסולסלים

JSX יכול לכתוב סימון דמוי HTML בתוך קובץ JavaScript, תוך שמירה על רינדור ההיגיון והתוכן באותו מקום. לפעמים תרצה להוסיף קצת הגיון JavaScript או להתייחס למאפיין דינמי בתוך הסימון הזה. בstate זה, אתה יכול להשתמש בסוגים מסולסלים ב-JSX שלך כדי לפתוח את החלון ל-JavaScript.

You will learn

  • איך להעביר מחרוזות עם מרכאות
  • בתוך איך תייחס לשינוי JavaScript JSX עם פלטה מסולסלת
  • איך לקרוא לפונקציית JavaScript בתוך JSX עם פלטה מסולסלת
  • איך להשתמש באובייקט בתוך JSX עם פלטה מסולסלת

מחרוזות עוברות עם מרכאות

כאשר אתה רוצה להעביר תכונה מחרוזת ל-JSX, אתה במירכאות בודדות אותה או כפולות:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

כאן, "https://i.imgur.com/7vQD0fPs.jpg" ו"Gregorio Y. Zara" מועברים כמחרוזות.

אבל מה אם אתה רוצה לציין באופן דינמי את הטקסט ‘src’ או ‘alt’? תוכל להשתמש בערך מ-JavaScript על ידי החלפת " ו-" ב-{ ו-}:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

שימו לב להבדל בין className="avatar", המציין את שם מחלקה "avatar" שיוצר את התמונה עגולה, וכי הוא src={avatar} שקורא את הערך של מדרג JavaScript הנקרא avatar. למה היא צריכה לעבוד עם JavaScript ממש שם בסימון שלך!

שימוש בפלטה מתולתת: חלון אל עולם ה-JavaScript

JSX היא דרך מיוחדת לכתיבת JavaScript. זה אומר שאפשר להשתמש ב-JavaScript בתוכו - עם סוגים מסולסלים { }. הדוגמה שלהלן מכריזה תחילה על שם למדן, שם, והגיעה מטמיעה אותו בסוגריים מסולסלים בתוך <h1>:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

נסה לשנות את הערך של השם מגרגוריו Y. Zara להדי לאמאר. ראה כיצד כותרת הרשימה?

כל ביטוי JavaScript יעבוד בין סוגרים מסולסלים, כולל קריאות לפונקציות כמו formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

היכן להשתמש בפלטה מתולתלת

אתה יכול להשתמש בסוגרים מתולתלים רק בשתי דרכים בתוך JSX:

  1. כטקסט בתוך תג JSX: <h1>`{name}'s to Do List`</h1> עובד, אבל <{tag}>רשימת המשימות של גרגוריו Y. Zara</{tag}> לא.
  2. כמאפיינים מיד אחרי הסימן =: src={avatar} יקרא את השינוי avatar, אבל src="{avatar}" יעביר את המחרוזת "{avatar}".

שימוש ב-”double curlies”: CSS ואובייקטים אחרים ב-JSX

בנוסף למחרוזות, מספרים וביטויי JavaScript אחרים, אתה יכול אפילו להעביר אובייקטים ב-JSX. אובייקטים מסומנים גם בסוגריים מסולסלים, כמו { שם: "הדי לאמאר", המצאות: 5 }. לכן, כדי להעביר אובייקט JS ב-JSX, עליך לתת את האובייקט בזוג אחר של סוגי מתולתלים: person={{ name: "Hedy Lamarr", המצאות: 5 }}.

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

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

נסה לשנות את הערכים של צבע רקע וצבע.

אתה באמת יכול לראות את האובייקט ה-JavaScript בתוך הפלטה המתולתת כאשר אתה כותב את זה כך:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

בפעם הבאה שתראה את {{ ו-}} ב-JSX, זה לא יותר מאשר אובייקט בתוך ה-JSX curlies!

Pitfall

מאפיינים סגנון מוטבעים כתובים ב-camelCase. לדוגמה, HTML <ul style="background-color: black"> ייכתב לפי <ul style={{ backgroundColor: 'black' }}> ברכיב שלך.

יותר כיף עם אובייקטי JavaScript וסוגרים מסולסלים

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

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

בדוגמה זו, אובייקט ה-JavaScript ‘אדם’ מכיל מחרוזת ‘שם’ ואובייקט ‘נושא’:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

הרכיב יכול להשתמש בערכים אלה מ’אדם’ כך:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX היא מינימלית מאוד כשפת תבניות שהיא מאפשרת לך לארגן נתונים והיגיון באמצעות JavaScript.

Recap

עכשיו אתה יודע כמעט הכל על JSX:

  • תכונות JSX בתוך מרכאות מועברות מחרוזות.
  • סוגרים מסולסלים מאפשרים לך להכניס לוגיקה ומשתנים של JavaScript לתוך הסימון שלך.
  • הם פועלים בתוך תוכן תג JSX או מיד אחרי = בתכונות.
  • {{ ו}} אינו תחביר מיוחד: זהו חפץ תחוב בתוך סוגרים מסולסלים של JSX.

Try out some challenges

Challenge 1 of 3:
תקן את הטעות

קוד זה קורס עם שגיאה האומרת ‘אובייקטים לא תקפים כילד תגובה’:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

האם אתה יכול למצוא את הבעיה?

Previousכתיבת Markup עם JSX
Nextהעברת Props לקומפוננטה

How do you like these docs?