عرض مصدر React/dom elements

<noinclude>{{DISPLAYTITLE:عناصر DOM في React}}</noinclude>
تعتمد React نظام DOM معتمد على المتصفّح من أجل الأداء والتوافقية بين المتصفحات. أخذنا عند بناء React الفرصة لتجاوز بعض الصعوبات في طريقة اعتماد DOM في المتصفّح.

يجب في React كتابة جميع خاصيّات HTML وخاصيّات الكائنات في DOM (بما في ذلك معالجات الأحداث) بطريقة سنام الجمل (camelCase). على سبيل المثال تتوافق خاصيّة HTML التي تُدعى <code>tabindex</code> مع الخاصيّة <code>tabIndex</code> في React. الاستثناء الوحيد هو خاصيّات <code>aria-*</code>‎ و <code>data-*</code>‎، والتي يجب كتابتها بأحرف صغيرة. على سبيل المثال بإمكانك الاحتفاظ بالخاصيّة <code>aria-label</code> باسمها <code>aria-label</code>.

== الفوارق بين خاصيّات HTML ==
هنالك عدد من خاصيّات HTML التي تعمل بشكل مختلف بين React و HTML:

=== <code>checked</code> ===
الخاصيّة <code>checked</code> مدعومة من قبل مكوّنات ‎<code><input></code>‎ من النوع <code>checkbox</code> أو <code>radio</code>. بإمكانك استخدامها لتحديد ما إذا كان المكوّن مُختارًا أم لا. يُفيد ذلك لبناء مكوّنات مضبوطة. إنّ الخاصيّة <code>defaultChecked</code> هي المكافئة في المكوّنات غير المضبوطة والتي تُحدّد ما إذا كان المكوّن مختارًا عند وصله.

=== <code>className</code> ===
استخدم الخاصيّة <code>className</code> لتحديد صنف CSS. ينطبق ذلك على جميع عناصر DOM و SVG الاعتيادية مثل ‎<code><nowiki><div></nowiki></code>‎ و <code>‎<a></code>‎، وغيرها.

إن كنت تستخدم React مع مكوّنات الويب (وهو أمرٌ غير شائع) فاستخدم الخاصيّة <code>class</code> بدلًا من ذلك.

=== <code>dangerouslySetInnerHTML</code> ===
الخاصيّة <code>dangerouslySetInnerHTML</code> هي بديل React لاستخدام <code>innerHTML</code> في DOM المتصفح. يكون تعيين HTML من الشيفرة أمرًا خطيرًا بشكلٍ عام لأنّه من السهل تعريق مستخدميك إلى [[wikipedia:Cross-site_scripting|هجمات XSS]] (اختصارًا للعبارة cross-site scripting). لذا يمكنك تعيين HTML بشكل مباشر من React، ولكن يجب عليك كتابة الخاصيّة <code>dangerouslySetInnerHTML</code> وتمرير كائن مع المفتاح <code>‎__html</code> لتذكير نفسك بخطر فعل ذلك. على سبيل المثال:<syntaxhighlight lang="javascript">
function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

</syntaxhighlight>

=== <code>htmlFor</code> ===
لمّا كانت <code>for</code> كلمة محجوزة في JavaScript، فتستخدم عناصر React الخاصيّة <code>htmlFor</code> بدلًا من ذلك.

=== <code>onChange</code> ===
يسلك الحدث <code>onChange</code> السلوك الذي تتوقعه منه، فعند تغيّر حقل إدخال يُطلَق هذا الحدث. لا نستخدم عن قصد السلوك الحالي للمتصفح لأنّ الحدث <code>onChange</code> هو تسمية خاطئة لسلوكه وتعتمد React على هذا الحدث للتعامل مع مدخلات المستخدم في الزمن الحقيقي.

=== <code>selected</code> ===
الخاصيّة <code>selected</code> مدعومة من قبل المكوّن ‎<code><option></code>‎. تستطيع استخدامها لتحديد ما إذا كان المكوّن مُحدَّدًا. يُفيد هذا لبناء مكوّنات مضبوطة.

=== <code>style</code> ===
'''ملاحظة:''' تستخدم بعض الأمثلة في التوثيق الخاصيّة <code>style</code> للسهولة، ولكنّ استخدام الخاصيّة <code>‎<option></code>‎ كوسيلة أساسية لتنسيق العناصر هو أمر غير مفضّل بشكلٍ عام. يجب في معظم الحالات استخدام الخاصيّة <code>[[React/dom elements#className|className]]</code> للإشارة إلى الأصناف المعرّفة في ملف تنسيق CSS خارجي. تُستخدَم الخاصيّة <code>style</code> غالبًا في تطبيقات React لإضافة تنسيقات محسوبة بشكل ديناميكي في الزمن الحقيقي. انظر أيضًا: [[React/faq styling|الأسئلة الأكثر شيوعًا: التنسيق و CSS]].

تقبل الخاصيّة <code>style</code> كائن JavaScript مع خاصيّات مكتوبة بشكل camelCase بدلًا من سلاسل نصيّة في CSS. يتوافق ذلك مع خاصيّة <code>style</code> في JavaScript، وهو أكثر كفاءة، ويمنع هجمات XSS. على سبيل المثال:<syntaxhighlight lang="javascript">
const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}
</syntaxhighlight>انتبه إلى عدم إرفاق لاحقة بشكل تلقائي للتنسيقات. لدعم المتصفحات الأقدم تحتاج إلى تزويد خاصيّات التنسيق الموافقة:<syntaxhighlight lang="javascript">
const divStyle = {
  WebkitTransition: 'all', // الكبير هنا W انتبه إلى حرف
  msTransition: 'all' // ms هي البادئة الوحيدة المكتوبة بأحرف صغيرة
};

function ComponentWithTransition() {
  return <div style={divStyle}>يجب أن يعمل هذا على جميع المتصفحات</div>;
}

</syntaxhighlight>مفاتيح التنسيق مكتوبة بالشكل camelCase لكي تكون متوافقة مع الوصول إلى الخاصيّات في عقد DOM من JavaScript (مثل <code>node.style.backgroundImage</code>). أي بادئة [http://www.andismith.com/blog/2012/02/modernizr-prefixed/ ما عدا <code>ms</code>] يجب أن تبدأ بحرف كبير، ولهذا السبب تبدأ <code>WebkitTransition</code> بحرف <code>W</code> كبير.

تُضيف React بشكل تلقائي اللاحقة <code>px</code> لبعض الخاصيّات العددية السطرية. إن أردت استخدام وحدات أخرى غير <code>px</code> فحدد القيمة كسلسلة نصية باسم الواحدة المطلوبة، على سبيل المثال:<syntaxhighlight lang="javascript">
// :ينتج عنه التنسيق
// 10px
<div style={{ height: 10 }}>
  أهلًا بالعالم!
</div>

// :ينتج عنه التنسيق
// 10%
<div style={{ height: '10%' }}>
  أهلًا بالعالم!
</div>

</syntaxhighlight>انتبه إلى تحويل كافة خاصيّات التنسيق إلى الواحدة <code>pixel</code> على الرغم من ذلك. وتبقى بعض الخاصيّات بدون واحدات مثل <code>zoom</code>، و <code>order</code>، و <code>flex</code>). للحصول على لائحة كاملة بالخاصيّات التي لا تملك واحدة [https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59 انظر هنا].

=== <code>suppressContentEditableWarning</code> ===
ينتج عادة تحذير عند وضع العلامة <code>contentEditable</code> على أي عنصر له عناصر أبناء لأنّها لن تعمل. توقف هذه الخاصيّة ذلك التحذير. لا تستخدم هذه الخاصيّة ما لم تكن تبني مكتبة مثل [https://facebook.github.io/draft-js/ Draft.js] والتي تُدير <code>contentEditable</code> بشكلٍ يدوي.

=== <code>suppressHydrationWarning</code> ===
إن كنت تستخدم تصيير React من جانب الخادم فهناك بشكل طبيعي تحذير عند تصيير الخادم والعميل لمحتوى مختلف. ولكن في بعض الحالات النادرة من الصعب أو المستحيل ضمان التطابق التام. مثلًا من المتوقع أن يختلف التوقيت بين الخادم والعميل.

إن عيّنتَ قيمة <code>suppressHydrationWarning</code> إلى <code>true</code> فلن تحذرك React حول عدم التطابق في الخاصيّات والمحتوى لذلك العنصر. تعمل هذه الخاصيّة فقط في مستوى واحد من المكوّنات. لا تفرط في استخدامها. بإمكانك قراءة المزيد حول hydration في [[React/react dom#hydrate.28.29.E2.80.8E|توثيق <code>ReactDOM.hydrate()</code>‎]].

=== <code>value</code> ===
تكون الخاصيّة value مدعومة من المكوّنين ‎<code><input></code>‎ و <code>‎<textarea></code>‎. بإمكانك استخدامها لتعيين قيمة المكوّن. يُفيد هذا في بناء مكوّنات مضبوطة. الخاصيّة <code>defaultValue</code> هي المكافئ في المكوّنات غير المضبوطة، والتي تُعيِّن قيمة المكوّن عند الوصل.

== كافة خاصيّات HTML المدعومة ==
بدءًا من إصدار React 16 فإنّ أي خاصيّات DOM معياريّة أو [https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html مخصصة] مدعومة بشكل كامل.

تزوّدنا React بواجهة برمجة تطبيق مرتكزة على JavaScript لأجل DOM. بما أنّ مكونات React تأخذ عادةً خاصيّات مخصصة أو متعلقة بـ DOM، فإنّ React تستخدم طريقة الكتابة camelCase مثل واجهات برمجة تطبيق DOM:<syntaxhighlight lang="javascript">
<div tabIndex="-1" />      // مثل node.tabIndex DOM API
<div className="Button" /> // مثل node.className DOM API
<input readOnly={true} />  // مثل node.readOnly DOM API

</syntaxhighlight>تعمل هذه الخاصيّات بشكل مماثل لخاصيّات HTML الموافقة لها باستثناء الحالات الخاصيّة التي وثقناها بالأعلى.

تتضمّن بعض خاصيّات DOM المدعومة من React:<syntaxhighlight lang="text">
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap

</syntaxhighlight>وبشكل مماثل تكون جميع خاصيّات SVG مدعومة بشكل كامل:<syntaxhighlight lang="text">
accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

</syntaxhighlight>بإمكانك أيضًا استخدام خاصيّات HTML مخصّصة طالما أنّها مكتوبة بأحرف صغيرة بشكلٍ كامل.
== انظر أيضًا ==
* [[React/react api|واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React]]
* [[React/react component|الصنف React.Component]]
* [[React/react dom|الكائن ReactDOM]]
* [[React/react dom server|الكائن ReactDOMServer]]
* [[React/events|الأحداث المصطنعة (Synthetic Events)]]
* [[React/test utils|أدوات الاختبار]]
* [[React/shallow renderer|التصيير السطحي (Shallow Rendering)]]
* [[React/test renderer|مصير الاختبار (Test Renderer)]]
* [[React/javascript environment requirements|متطلبات بيئة JavaScript]]
==مصادر==
*[https://reactjs.org/docs/dom-elements.html صفحة عناصر DOM في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React API Reference]]