diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..3a2122fa3 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -14,27 +14,27 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. +React מיישמת מערכת DOM ללא-תלות בדפדפן עבור ביצועים ותאימות לדפדפנים שונים. ניצלנו את ההזדמנות על מנת לנקות מספר בעיות במימוש ה-DOM של הדפדפן. -In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`. +ב-React, כל המאפיינים (properties) והתכונות (attributes) של ה-DOM (כולל מנהלי אירועים) צריכים להיות camelCased. לדוגמה, תכונת ה-`tabindex` של HTML מקבילה לתכונה `tabIndex` ב-React. המקרים היוצאים מן הכלל הם `aria-*` ו-`data-*`, שצריכים להיות באותיות קטנות. לדוגמה, נוכל להשאיר את `aria-label` בתור `aria-label`. -## Differences In Attributes {#differences-in-attributes} +## הבדלים בתכונות {#differences-in-attributes} -There are a number of attributes that work differently between React and HTML: +ישנן מספר תכונות שעובדות בצורה שונה בין HTML ו-React: ### checked {#checked} -The `checked` attribute is supported by `` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted. +התכונה `checked` נתמכת בקומפוננטות `` מסוג `checkbox` או `radio`. אתה יכול להשתמש בה על מנת לקבוע האם הקומפוננטה מסומנת. דבר זה שימושי לבניית קומפוננטות נשלטות. `defaultChecked` היא המקבילה הלא נשלטת, שקובעת האם הקומפוננטה מסומנת בזמן שהיא mounted בפעם הראשונה. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +כדי להוסיף מחלקת CSS, נשתמש בתכונת ה-`className`. העניין נוגע לכל אלמנטי ה-DOM וה-SVG הרגילים כמו `
`, `` ואחרים. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +אם אתה משתמש ב-React עם Web Components (דבר שאיננו נפוץ כל כך), השתמש בתכונת ה-`class` במקום. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: +`dangerouslySetInnerHTML` היא החלופה של React לשימוש ב-`innerHTML` ב-DOM של הדפדפן. באופן כללי, קביעת HTML מהקוד היא מסוכנת מכיוון שזה קל בטעות לחשוף את המשתמשים שלך ל[מתקפת XSS))] (https://en.wikipedia.org/wiki/Cross-site_scripting). לעומת זאת, אפשר לכתוב HTML ישירות מ-React, אבל אתה צריך לכתוב `dangerouslySetInnerHTML` ולהעביר אובייקט עם מפתח `__html`, על מנת להזכיר לעצמך שזה מסוכן. לדוגמה: ```js function createMarkup() { @@ -48,23 +48,23 @@ function MyComponent() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +מאחר ו-`for` היא מילה שמורה ב-JavaScript, אלמנטי React משתמשים ב-`htmlFor` במקום. ### onChange {#onchange} -The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. +אירוע ה-`onChange` מתנהג כמו שהיית מצפה: בכל פעם ששדה טופס משתנה, אירוע זה נורה. אנחנו בכוונה לא משתמשים בהתנהגות המובנית בדפדפן בגלל ש-`onChange` לא מתנהג כמו שהוא אמור להתנהג, ו-React מסתמכת על אירוע זה שיטפל בקלטי משתמש בזמן אמת. ### selected {#selected} -The `selected` attribute is supported by `