<כותרת>

Canary

ההרחבות של React ל-<title> זמינות כרגע רק בערוצי canary ו-experimental של React. בגרסאות יציבות של React, <title> פועל רק כ-רכיב HTML מובנה של הדפדפן. מידע נוסף ב-ערוצי השחרור של React.

רכיב הדפדפן המובהנה <title> מאפשר את כותרת המסמך.

<title>My Blog</title>

הפניה
- <title>
שימוש
- הגדרת כותרת המסמך
- שימוש במשתנים בתוך הכותרת

הפניה

`<title>`

כדי לקבוע את הכותרת המסמך, רנדרו את רכיב הדפדפן המובנה <title>. אפשר לרנדר <title> מכל קומפוננטה ו-React תמיד תמקם את האלמנט ה-DOM המתאים בתוך ראש המסמך.

<title>My Blog</title>

עוד דוגמאות נוספות.

אבזרים

<title> תומך בכל מאפייני האלמנט הנפוצים.

children: רכיב <title> מקבל רק טקסט כ-ילד. הטקסט יהפוך לכותרת המסמך הזה. אפשר גם להעביר קומפונטות משלכם כל עוד הן מרנדרות רק טקסט.

התנהגות רינדור מיוחדת K_0

React תמיד תמקם את האלמנט ה-DOM מתאים ל-<title> בתוך <head> של המסמך, בלי קשר למקום שבו הוא מרונדר בעץ React. <head> הוא החוק היחיד ל-<title> בתוך ה-DOM, ובכל זאת נוח ושומר על קומפוזיציות אם קומפונטה שמציגה עמוד מסויים יכולה לרנדר בעצמה את <title> שלה.

יש שני חריגים לכך:

אם <title> נמצא בתוך רכיב <svg>, אין התנהגות מיוחדת, כי בהקשר הזה הוא לא מייצג את כותרת המסמך אלא הערת נגישות לגרפיקת ה-SVG.
אם ל-<title> יש פרופס סטייל itemProp, אין התנהגות מיוחדת, כי במקרה הזה הוא לא מייצג את הכותרת המסמך אלא מטא נתונים על חלק מסוים בעמוד.

Pitfall

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

שימוש

הגדרת כותרת המסמך

רנדרו את רכיב <title> מכל קומפוננטה עם טקסט כ-ילדים שלו. React תשים DOM צומת של <title> בתוך <head> של המסמך.

Fork

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function ContactUsPage() {
  return (
    <ShowRenderedHTML>
      <title>My Site: Contact Us</title>
      <h1>Contact Us</h1>
      <p>Email us at support@example.com</p>
    </ShowRenderedHTML>
  );
}

שימוש במשתנים בתוך הכותרת

ה-children של רכיב <title> חייבים להיות מחרוזת טקסט יחידה. (או מספר יחיד, או אובייקט יחיד עם מתודת toString.) זה יכול להיות לא ברור, אבל שימוש בסוגריים מסולסלים של JSX כך:

<title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string

… בעצם גורם לרכיב <title> לקבל מערך של שני אלמנטים כ-children (המחרוזת "Results page" והערך של pageNumber). זה יגרום לשגיאה. במקום זאת, השתמשו ב-string interpolation כדי להעביר ל-<title> מחרוזת יחידה:

<title>{`Results page ${pageNumber}`}</title>

Previous<style>

NextAPIs

<כותרת> - This feature is available in the latest Canary