React DOM רכיבים

React תומכת בכל רכיבי הדפדפן המובנים של HTML ושל SVG.


רכיבים נפוצים

כל רכיבי הדפדפן המובנים תומכים בחלק מה-props ובאירועים.

זה כולל גם props ייחודיים ל-React כמו ref ו-dangerouslySetInnerHTML.


רכיבי טפסים

רכיבי הדפדפן המובנים הבאים מקבלים קלט מהמשתמש:

הם מיוחדים ב-React כי העברת פרופס בשם value אליהם הופכת אותם ל-* controlled.*


רכיבי משאבים ומטא-דאטה

רכיבי הדפדפן המובנים האלה מאפשרים לטעון משאבים חיצוניים או להוסיף מטא-דאטה למסמך:

הם מיוחדים ב-React כי React יכולה לרנדר אותם לראש של המסמך, לבצע suspend בזמן טעינת משאבים, ולהפעיל התנהגויות נוספות שמתוארות בדף ההפניה של כל הרכיב.


כל רכיבי ה-HTML

React תומכת בכל רכיבי ה-HTML המובנים של הדפדפן. כולל הרשימה:

Note

בדומה ל-תקן DOM, ב-React משתמשים בקונבנציה של camelCase לשמות props. לדוגמה, תכתבו tabIndex במקום tabindex. אפשר להמיר HTML וקיים ל-https://transform.tools/html-to-jsx).]( [מיר מ”ק_4__)


אלמנטים מותאמים אישיים שלHTML

אם תרו תגית עם מקף, כמו <my-element>, React תניח אתם רוצים לרנדר Custom HTML element. ב-React רינדור אלמנטים מותאמים אישית עובד אחרת מרינדור תגיות דפדפן מובנות:

  • כל props של אלמנטים מותאמים אישית עוברים סידורי למחרוזות ותמיד קבועים באמצעות מאפיינים.
  • אלמנטים מותאמים אישית מקבלים class במקום className, ו-for במקום htmlFor.

אם תרנדרו אלמנט HTML מובנה עם תכונה בשם is, הוא יטופל גם הוא כ-custom element.

Note

גרסה עתידית של React תכלול תמיכה רחבה יותר ב-custom elements.

אפשר לנסות זאת על ידי שדרוג חבילות React לגרסה הניסיונית האחרונה:

  • react@experimental
  • react-dom@experimental

גרסאות ניסיוניות של React עשויות להכיל באגים. אל תשתמשו בפרודקשן.


כל רכיבי ה-SVG

React תומכת בכל רכיבי ה-SVG המובנים של הדפדפן. כולל הרשימה:

Note

בדומה ל-תקן DOM, ב-React משתמשים בקונבנציה של camelCase לשמות props. לדוגמה, תכתבו tabIndex במקום tabindex. אפשר להמיר SVG קיים ל-JSX בעזרת [ממיר אונליין](

מאפיינים עם מרחב שמות גם חייבים להיכתב בלי נקודתיים:

  • xlink:actuate גורם ל-xlinkActuate.
  • xlink:arcrole גורם ל-xlinkArcrole.
  • xlink:href גורם ל-xlinkHref.
  • xlink:role גורם ל-xlinkRole.
  • xlink:show גורם ל-xlinkShow.
  • xlink:title גורם ל-xlinkTitle.
  • xlink:type גורם ל-xlinkType.
  • xml:base גורם ל-xmlBase.
  • xml:lang גורם ל-xmlLang.
  • xml:space גורם ל-xmlSpace.
  • xmlns:xlink גורם ל-xmlnsXlink.