<title>
רכיב הדפדפן המובנה <title> מאפשר לקבוע את כותרת המסמך.
<title>My Blog</title>Reference
<title>
כדי לקבוע את כותרת המסמך, רנדרו את רכיב הדפדפן המובנה <title>. אפשר לרנדר <title> מכל קומפוננטה ו-React תמיד תמקם את אלמנט ה-DOM המתאים בתוך ה-document head.
<title>My Blog</title>Props
<title> תומך בכל מאפייני האלמנט הנפוצים.
children: רכיב<title>מקבל רק טקסט כ-child. הטקסט הזה יהפוך לכותרת המסמך. אפשר גם להעביר קומפוננטות משלכם כל עוד הן מרנדרות רק טקסט.
התנהגות רינדור מיוחדת
React תמיד תמקם את אלמנט ה-DOM המתאים ל-<title> בתוך <head> של המסמך, בלי קשר למקום שבו הוא מרונדר בעץ React. <head> הוא המקום החוקי היחיד ל-<title> בתוך ה-DOM, ובכל זאת זה נוח ושומר על קומפוזביליות אם קומפוננטה שמייצגת עמוד מסוים יכולה לרנדר בעצמה את <title> שלה.
יש שני חריגים לכך:
- אם
<title>נמצא בתוך רכיב<svg>, אין התנהגות מיוחדת, כי בהקשר הזה הוא לא מייצג את כותרת המסמך אלא הערת נגישות לגרפיקת ה-SVG. - אם ל-
<title>יש prop מסוגitemProp, אין התנהגות מיוחדת, כי במקרה הזה הוא לא מייצג את כותרת המסמך אלא metadata על חלק מסוים בעמוד.
שימוש
הגדרת כותרת המסמך
רנדרו את רכיב <title> מכל קומפוננטה עם טקסט כ-children שלו. React תשים DOM node של <title> בתוך <head> של המסמך.
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>