الفرق بين المراجعتين ل"React/dom elements"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:عناصر DOM}}</noinclude>')
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:عناصر DOM}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:عناصر DOM}}</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 من الشيفرة أمرًا خطيرًا بشكلٍ عام لأنّه من السهل تعريق مستخدميك إلى هجمات 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>className</code> للإشارة إلى الأصناف المعرّفة في ملف تنسيق CSS خارجي. تُستخدَم الخاصيّة <code>style</code> غالبًا في تطبيقات React لإضافة تنسيقات محسوبة بشكل ديناميكي في الزمن الحقيقي. انظر أيضًا: الأسئلة الأكثر شيوعًا: التنسيق و CSS.
 +
 +
تقبل الخاصيّة <code>style</code> كائن JavaScript مع خاصيّات مكتوبة بشكل camelCase بدلًا من سلاسل نصيّة في CSS. يتوافق ذلك مع خاصيّة <code>style</code> في JavaScript، وهو أكثر كفاءة، ويمنع هجمات XSS. على سبيل المثال:

مراجعة 01:34، 9 سبتمبر 2018

تعتمد React نظام DOM معتمد على المتصفّح من أجل الأداء والتوافقية بين المتصفحات. أخذنا عند بناء React الفرصة لتجاوز بعض الصعوبات في طريقة اعتماد DOM في المتصفّح.

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

الفوارق بين خاصيّات HTML

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

checked

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

className

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

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

dangerouslySetInnerHTML

الخاصيّة dangerouslySetInnerHTML هي بديل React لاستخدام innerHTML في DOM المتصفح. يكون تعيين HTML من الشيفرة أمرًا خطيرًا بشكلٍ عام لأنّه من السهل تعريق مستخدميك إلى هجمات XSS (اختصارًا للعبارة cross-site scripting). لذا يمكنك تعيين HTML بشكل مباشر من React، ولكن يجب عليك كتابة الخاصيّة dangerouslySetInnerHTML وتمرير كائن مع المفتاح ‎__html لتذكير نفسك بخطر فعل ذلك. على سبيل المثال:

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

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

htmlFor

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

onChange

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

selected

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

style

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

تقبل الخاصيّة style كائن JavaScript مع خاصيّات مكتوبة بشكل camelCase بدلًا من سلاسل نصيّة في CSS. يتوافق ذلك مع خاصيّة style في JavaScript، وهو أكثر كفاءة، ويمنع هجمات XSS. على سبيل المثال:

مجلوبة من "https://wiki.hsoub.com/index.php?title=React/dom_elements&oldid=17321"