سيناقش هذا المقال إنشاء عقد React (React Nodes) سواءً النصية (text nodes) أو عقد العناصر (element nodes) باستخدام JavaScript.
ما هي عقدة React؟
النوع الأساسي أو القيمة التي تُنشَأ عند استخدام مكتبة React تسمى «عقدة React»، ويمكن تعريف عقدة React على أنها «تمثيل افتراضي خفيف وعديم الحالة وغير قابلٍ للتعديل لعقدة DOM» (لا تخف من الكلام السابق، هذا هو التعريف الرسمي، ما باليد حيلة :-) ).
عقد React ليست عقد DOM حقيقية، وإنما تمثيل عن عقدة DOM محتملة، وهذا التمثيل يعد على أنه شجرة DOM افتراضية، ويُستخدم React لتعريف شجرة DOM الافتراضية باستخدام عقد React، والتي تُشكِّل البنية الأساسية لمكوِّنات React، والتي في نهاية المطاف ستُستخدَم لإنشاء بنية DOM الحقيقة وغير ذلك من البنى (مثل React Native).
يمكن أن تُنشَأ عقد React باستخدام JSX أو JavaScript. سنلقي في هذا المقال نظرةً على إنشاء عقد React باستخدام JavaScript بمفردها دون استخدام JSX. إذ أرى أنَّ عليك فهم ما الذي تخفيه JSX وراء الكواليس لكي تفهم JSX فهمًا جيدًا.
قد تحدثك نفسك بتجاوز هذا المقال لأنك تعرف مسبقًا أننا لن نستخدم JSX. لا تطعها! أقترح عليك أن تكمل قراءة هذا المقال لكي تعرف ما الذي تفعله لك JSX. ربما هذا أهم مقال في السلسلة ليتغلغل في ذهنك!
إنشاء عقد العناصر
سيُفضِّل المطورون في أغلبية الأوقات استخدام JSX مع React لإنشاء عقد العناصر، وبغض النظر عن ذلك، سنتعرّف في هذا المقال على طريقة إنشاء عقد React دون استخدام JSX باستعمال JavaScript فقط. أما المقال القادم فهو يناقش كيفية إنشاء عقد React باستخدام JSX.
إنشاء عقد React سهلٌ جدًا فكل ما نحتاج له هو استخدام الدالة React.createElement(type, props, children) وتمرير مجموعة من الوسائط إليها والتي تُعرِّف عقدة DOM الفعلية (مثالًا نضبط قيمة type إلى عنصر من عناصر HTML مثل <li>
أو عنصر مخصص مثل <my-li>
).
وسائط الدالة React.createElement())
مشروحة أدناه:
-
type (string | React.createClass())
يمكن أن تكون سلسلة نصية تُمثِّل عنصر HTML (أو عنصر HTML مخصص) أو نسخة من مكوِّنات React. -
props (null | object)
يمكن أن يكونnull
أو كائن يحتوي على خاصيات وقيم مرتبطة بها. -
children (null | string | React.Component | React.createElement())
يمكن أن تكونnull
أو سلسلة نصية التي ستحوّل إلى عقدة نصية، أو نسخة منReact.Component
أوReact.createElement()
.
سأستخدم في المثال الآتي الدالة React.createElement()
لإنشاء تمثيل في شجرة DOM الافتراضية لعقدة العنصر <li>
والتي تحتوي على عقدة نصية فيها one
(أي عقدة نصية في React) ومُعرِّف id
يساوي li1
.
var reactNodeLi = React.createElement('li', {id:'li1'}, 'one');
لاحظ أنَّ أول وسيط يُعرِّف ما هو عنصر HTML الذي نريد تمثيله، ويعُرِّف الوسيط الثاني ما هي الخاصيات التي ستُضبَط على العناصر <li>
، وأخيرًا سيُعرِّف الوسيط الثالث ما هي العقدة الموجودة داخل العنصر، وفي هذه الحالة وضعنا ببساطة عقدةً نصية (أي 'one'
) داخل <li>
. لاحظ أنَّ آخر وسيط الذي سيصبح ابنًا للعقدة المُنشَأة يمكن أن يكون عقدة React نصية، أو عقدة عنصر في React، أو نسخة من مكوِّن React.
كل ما فعلناه إلى الآن هو إنشاء عقدة عنصر في React تحتوي على عقدة React نصية، والتي خزناها في المتغير reactNodeLi
، ولإنشاء شجرة DOM الوهمية فعلينا تصيير عقدة عنصر React في شجرة DOM الحقيقية، ولفعل ذلك سنستخدم الدالة ReactDOM.render()
:
ReactDOM.render(reactNodeLi, document.getElementById('app'));
إذا أردنا وصف الشيفرة السابقة ببساطة، فهي تتضمن:
-
إنشاء شجرة DOM افتراضية مبنية من عقدة عنصر React المُمرَّرة (أي
reactNodeLi
)، -
استخدام شجرة DOM الافتراضية لإعادة إنشاء فرع من شجرة DOM الحقيقية،
-
إضافة الفرع المُنشَأ (أي
<li id="li1">one</li>
) إلى شجرة DOM الحقيقة كأحد أبناء العنصر<div id="app"></div>
.
بعبارةٍ أخرى، ستتغير شجرة DOM لمستند HTML من:
<div id="app"></div>
إلى:
<div id="app"> // data-reactid قد أضافت الخاصية React لاحظ أنَّ <li id="li1" data-reactid=".0">one</li> </div>
بيّن المثال السابق استخدامًا بسيطًا للدالة React.createElement()
. يمكن للدالة React.createElement()
إنشاء بنى معقدة أيضًا. فعلى سبيل المثال سنستخدم الدالة React.createElement()
لإنشاء فرع من عقد React يُمثِّل قائمة غير مرتبة من العناصر (أي <ul>
):
// React في <li> إنشاء عقد عناصر var rElmLi1 = React.createElement('li', {id:'li1'}, 'one'); var rElmLi2 = React.createElement('li', {id:'li2'}, 'two'); var rElmLi3 = React.createElement('li', {id:'li3'}, 'three'); // السابقة إليها <li> وإضافة عناصر React في <ul> إنشاء عقدة العنصر var reactElementUl = React.createElement('ul', {className: 'myList'}, rElmLi1, rElmLi2, rElmLi3);
قبل تصيير القائمة غير المرتبة إلى شجرة DOM، أرى إخبارك أنَّه يمكن تبسيط الشيفرة السابقة باستخدام React.createElement()
بدلًا من المتغيرات. هذا المثال يوضِّح كيف يمكن تعريف الهيكلية باستخدام JavaScript:
var reactElementUl = React.createElement( 'ul', { className: 'myList' }, React.createElement('li', {id: 'li1'},'one'), React.createElement('li', {id: 'li2'},'two'), React.createElement('li', {id: 'li3'},'three') );
عند تصيير الشيفرة السابقة إلى DOM فستبدو شيفرة HTML الناتجة كما يلي:
<ul class="myList" data-reactid=".0"> <li id="li1" data-reactid=".0.0">one</li> <li id="li2" data-reactid=".0.1">two</li> <li id="li3" data-reactid=".0.2">three</li> </ul>
يجب أن يكون واضحًا أنَّ عقد React هي كائنات JavaScript في شجرةٍ تمثِّل عقد DOM حقيقية داخل شجرة DOM الافتراضية. ثم تُستخدَم شجرة DOM الافتراضية لتعديل شجرة DOM الحقيقية داخل صفحة HTML.
ملاحظات
-
يمكن أن يكون الوسيط
type
المُمرَّر إلى الدالةReact.createElement()
سلسلةً نصية تُشير إلى عنصر من عناصر HTML القياسية (مثل'li'
الذي يمُثِّل العنصر<li>
)، أو عنصرًا مخصصًا (مثل'foo-bar'
الذي يُمثِّل العنصر<foo-bar>
)، أو نسخة من مكوِّن في React (أي نسخة منReact.Component
). -
هذه هي قائمة عناصر HTML التي تدعمها React (أي تمرير هذه العناصر كسلسلة نصية مكان المعامل type إلى الدالة
createElement()
سيؤدي إلى إنشاء عنصر HTML القياسي في DOM):
a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr
تصيير (rendering) العناصر إلى شجرة DOM
توفِّر React الدالة React.render()
من الملف react-dom.js
التي يمكن أن تُستخدَم لتصيير عقد عناصر React إلى شجرة DOM. لقد رأينا الدالة render()
مستخدمةً في هذا المقال.
سنستخدم في المثال الآتي الدالة ReactDOM.render()
وستُصيّر عقد العناصر '<li>'
و '<foo-bar>'
إلى شجرة DOM:
// حقيقي DOM والتي تُمثِّل عقدة عنصر React عقدة var HTMLLi = React.createElement('li', {className:'bar'}, 'foo'); // مخصص HTML والتي تُمثِّل عقد عنصر React عقدة var HTMLCustom = React.createElement('foo-bar', {className:'bar'}, 'foo'); // <div id="app1"></div> إلى HTMLLi تصيير عقدة العنصر ReactDOM.render(HTMLLi, document.getElementById('app1')); // <div id="app2"></div> إلى HTMLCustom تصيير عقدة العنصر ReactDOM.render(HTMLCustom, document.getElementById('app2'));
بعد تصيير العناصر إلى شجرة DOM، فسيبدو مستند HTML المُحدَّث كما يلي:
<body> <div id="app1"><li class="bar" data-reactid=".0">foo</li></div> <div id="app2"><foo-bar classname="bar" children="foo" data-reactid=".1">foo</foo-bar></div> </body>
الدالة ReactDOM.render()
هي الطريقة المبدئية التي تمكننا من نقل عقد العناصر في React إلى شجرة DOM الوهمية، ثم إلى شجرة DOM الحقيقية.
ملاحظات
-
ستستبدل أي عقد DOM داخل عناصر DOM التي سيُصيَّر إليها (أي أنها ستُحذَف ويحلّ المحتوى الجديد محلها).
-
الدالة
ReactDOM.render()
لا تعدِّل عقدة عنصر DOM الذي تُصيّر React إليه، وإنما تتطلَّب React ملكيةً كاملةً للعقدة النصية عند التصيير، فلا يجدر بك إضافة أبناء أو إزالة أبناء من العقدة التي تضيف React فيها المكوِّن أو العقدة. -
التصيير إلى شجرة HTML DOM هو أحد الخيارات فقط، فهنالك خياراتٌ أخرى ممكنة، فمثلًا تستطيع التصيير إلى سلسلة نصية (أي
ReactDOMServer.renderToString()
) في جهة الخادم. -
إعادة تصيير نفس عنصر DOM سيؤدي إلى تحديث العقد الأبناء الحاليين إذا حدث تغييرٌ فيها، أو إذا أُضيفت عقدة عنصر ابن جديدة.
تعريف خاصيات العقد
الوسيط الثاني الذي يُمرَّر إلى الدالة React.createElement(type, props, children)
هو كائنٌ يحتوي على خاصيات ذات أسماء ترتبط بها قيم.
تمتلك الخاصيات عدِّة أدوار:
-
يمكن أن تتحول إلى خاصيات HTML. فلو طابقت إحدى الخاصيات خاصية HTML معروفة، فستُضاف إلى عنصر HTML النهائي في DOM.
-
الخاصيات المُمرَّرة إلى
createElement()
ستصبح قيمًا مخزنةً في الكائنprop
كنسخة منReact.createElement()
(أي [INSTANCE].props.[NAME_OF_PROP]
). تستخدم الخاصيات بكثرة لإدخال قيم إلى المكوِّنات. -
تمتلك بعض الخاصيات تأثيراتٍ جانبية (مثل
key
وref
وdangerouslySetInnerHTML
).
يمكنك أن تتخيل الخاصيات على أنها خيارات ضبط لعقد React، ويمكنك أن تتخيلها كخاصيات HTML.
سنُعرِّف في المثال الآتي عقدة العنصر <li>
مع خمس خاصيات، إحدى تلك الخاصيات غير قياسية في HTML (أقصد بها foo:'bar'
) وبقية الخاصيات معروفة في HTML:
var reactNodeLi = React.createElement('li', { foo:'bar', id:'li1', // للإشارة إلى صنف الأنماط في جافاسكربت className لاحظ استخدام الخاصية className: 'blue', 'data-test': 'test', 'aria-test': 'test', // CSS لضبط خاصية backgroundColor لاحظ استخدام الخاصية style: {backgroundColor: 'red'} }, 'text' );
ستبدو الشيفرة المُصيَّرة إلى صفحة HTML كما يلي:
<li id="li1" data-test="test" class="blue" aria-test="test" style="background-color:red;" data-reactid=".0">text</li>
ما عليك إدراكه من المثال السابق أنَّ خاصيات HTML القياسية فقط، وخاصيات data-*
و aria-*
هي الخاصيات الوحيدة التي تنتقل إلى شجرة DOM الحقيقية من شجرة DOM الافتراضية.
لاحظ أنَّ الخاصية foo
لن تظهر في شجرة DOM الحقيقية، فهذه الخاصية غير القياسية ستكون متاحةً في نسخة الكائن li
لعقدة React (أي reactNodeLi.props.foo
):
var reactNodeLi = React.createElement('div',{ foo:'bar', id:'li1', className: 'blue', 'data-test': 'test', 'aria-test': 'test', style: {backgroundColor: 'red'} }, 'text' ); console.log(reactNodeLi.props.foo); // bar ReactDOM.render(reactNodeLi, document.getElementById('app'));
ليس استخدام خاصيات React مقتصرًا على تحويلها إلى خاصيات HTML حقيقية، لكن يمكن أن تلعب دورًا في إعدادات الضبط المُمرَّرة إلى مكونات React. هذا الجانب من جوانب استخدام الخاصيات سيغطى في مقالٍ خاصٍ به، أما الآن فكل ما علينا إدراكه هو أنَّ تمرير خاصية إلى عقدة React هو أمرٌ يختلف عن تعريف خاصية في مكوِّن لكي تُستخدم لمدخلات ضبط ضمن ذاك المكوِّن.
ملاحظات
-
ترك قيمة إحدى الخاصيات فارغةً سيؤدي إلى جعل قيمتها مساويةً إلى
true
(أيid=""
ستصبحid="true"
، وtest
ستصبحtest="true"
). -
إذا كانت خاصيةٌ ما مكررةً فستؤخذ آخر قيمة لها.
-
إذا مررت خاصيات إلى عناصر HTML التي ليست موجودة في مواصفة HTML فلن تعرضها React. أما إذا استخدمتَ عناصر HTML مخصصة (أي أنها ليست قياسية) فستُضاف الخاصيات التي ليست موجودةً في مواصفة HTML إلى العناصر المخصصة (فمثلًا
<x-my-component custom-attribute="foo" />
). -
الخاصية
class
يجب أن تكتبclassName
. -
الخاصية
for
يجب أن تكتبhtmlFor
. -
الخاصية
style
تقبل إشارةً مرجعيةً إلى كائنٍ يحتوي على خاصيات CSS بالصيغة المتعارف عليها في JavaScript (أيbackground-color
تصبحbackgroundColor
). -
خاصيات النماذج في HTML (مثل
<input>
أو<textarea></textarea>
…إلخ.) المُنشَأة كعقد React ستدعم خاصيات التي يمكن تغييرها عبر تفاعل المستخدم مع العنصر؛ وهذه الخاصيات هيvalue
وchecked
وselected
. -
توفِّر React الخاصيات
key
وref
وdangerouslySetInnerHTML)
التي لا تتوافر في DOM وتأخذ دورًا فريدًا. -
يجب أن تكتب جميع الخاصيات مع حذف الشرطة - وجعل أول حرف يليها مكتوبًا بحرفٍ كبير، أي أنَّ الخاصية
accept-charset
ستُكتَبacceptCharset
. -
هذه هي خاصيات HTML التي تدعمها تطبيقات React:
accept acceptCharset accessKey action allowFullScreen allowTransparency alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked classID className colSpan cols content contentEditable contextMenu controls 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 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
تضمين أنماط CSS السطرية في عقد العناصر
لتطبيق أنماط CSS السطرية (inline CSS styles) على عقدة React، فعليك تمرير كائن يحتوي على خاصيات CSS والقيم المرتبطة بها إلى الخاصية style.
على سبيل المثال، سنمرر مرجعيةً إلى الكائن inlineStyles
إلى الخاصية style
:
var inlineStyles = {backgroundColor: 'red', fontSize: 20}; var reactNodeLi = React.createElement('div', {style: inlineStyles}, 'styled') ReactDOM.render(reactNodeLi, document.getElementById('app1'));
ستبدو شيفرة HTML الناتجة شبيهةً بما يلي:
<div id="app1"> <div style="background-color:red;font-size:20px;" data-reactid=".0">styled</div> </div>
هنالك أمران عليك الانتباه إليهما في الشيفرة السابقة:
-
لم نضف الواحدة
"px"
إلى الخاصيةfontSize
لأنَّ React أضافته عوضًا عنّا. -
عند كتابة خاصيات CSS في JavaScript، يجب حذف الشرطة وجعل الحرف الذي يليها مكتوبًا بحرفٍ كبير (أي
backgroundColor
بدلًا منbackground-color
).
ملاحظات
-
يجب أن تبدأ السابقات الخاصة بالمتصفحات (باستثناء
ms
) بحرفٍ كبير، لهذا السبب تبدأ الخاصيةWebkitTransition
بحرفW
كبير (ولم أعد أنصح بإضافة هذه الخاصيات إلا لدعم المتصفحات القديمة جدًا). -
يجب ألا يفاجئك استخدام الأحرف الكبيرة في أسماء خاصيات CSS بدلًا من الشرطات، فهذه هي الطريقة المتبعة للوصول إلى تلك الخاصيات في شجرة DOM عبر JavaScript (كما في
document.body.style.backgroundImage
). -
عند تحديد قيمة بواحدة البكسل، فستضيف React السلسلة النصية
"px"
تلقائيًا بعد القيم الرقمية باستثناء الخاصيات الآتية:
columnCount fillOpacity flex flexGrow flexShrink fontWeight lineClamp lineHeight opacity order orphans strokeOpacity widows zIndex zoom
استخدام مصانع العناصر المُضمَّنة في React
توفِّر React اختصارات مضمَّنة لإنشاء عقد عناصر HTML شائعة الاستخدام. تسمى هذه الاختصارات بمصانع عقد React.
قبل الإصدار 16.0 من مكتبة React.js، كانت هذه المصانع مضمنة في المكتبة نفسها، لكن بعد الإصدار 16.0 فقد أسقط الدعم عنها، وظهرت وحدة باسم react-dom-factories)
التي تتيح استخدام المصانع التي كانت مضمنة في React.js مع الإصدارات الجديدة من المكتبة.
مصنع لعقد React هو دالةٌ تولِّد ReactElement
مع قيمة معينة لخاصية type.
باستخدام المصنع المضمن React.DOM.li()
، يمكننا إنشاء عقدة العنصر <li>one</li>
في React كما يلي:
// DOM.li(props, children); import DOM from 'react-dom-factories'; var reactNodeLi = DOM.li({id:'li1'}, 'one');
وذلك بدلًا من استخدام:
// React.createElement(type, prop, children) var reactNodeLi = React.createElement('li', null, 'one');
هذه قائمة بجميع المصانع المُضمَّنة في React:
a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,big,blockquote,body,br,button, canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl, dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup, hr,html,i,iframe,img,input,ins,kbd,keygen,label,legend,li,link,main,map,mark,menu, menuitem,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture, pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strong, style,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track, u,ul,var,video,wbr,circle,clipPath,defs,ellipse,g,image,line,linearGradient,mask, path,pattern,polygon,polyline,radialGradient,rect,stop,svg,text,tspa
ملاحظات
-
إذا كنتَ تستخدم JSX فقد لا تحتاج إلى استخدام المصانع إطلاقًا.
-
يمكن إنشاء مصانع مخصصة إن كان ذلك ضروريًا.
تعريف أحداث عقد React
يمكن إضافة الأحداث إلى عقد React كما لو أردنا إضافة الأحداث إلى عقد DOM. سنضيف في المثال الآتي حدثين بسيطين click
و mouseover
إلى عقدة <div>
:
var mouseOverHandler = function mouseOverHandler() { console.log('you moused over'); }; var clickhandler = function clickhandler() { console.log('you clicked'); }; var reactNode = React.createElement( 'div', { onClick: clickhandler, onMouseOver: mouseOverHandler }, 'click or mouse over' ); ReactDOM.render(reactNode, document.getElementById('app'));
لاحظ أنَّ اسم الخاصية لأحداث React تبدأ بالحرفين 'on'
وتُمرِّر في الكائن props
المُمرَّر إلى الدالة ReactElement()
.
تُنشئ React ما تسميه SyntheticEvent
لكل حدث، والذي يحتوي على تفاصيل الحدث، وهي شبيهة بتفاصيل الأحداث المُعرَّفة في DOM. يمكن مثلًا الاستفادة من نسخة الكائن SyntheticEvent
بتمريره إلى معالجات الأحداث، وسأفعل ذلك في المثال الآتي لتسجيل تفاصيل الحدث SyntheticEvent
.
var clickhandler = function clickhandler(SyntheticEvent) { console.log(SyntheticEvent); }; var reactNode = React.createElement( 'div', { onClick: clickhandler}, 'click' ); ReactDOM.render(reactNode, document.getElementById('app'));
كل كائن من النوع syntheticEvent
يملك الخاصيات الآتية:
-
bubbles
-
cancelable
-
DOMEventTarget currentTarget
-
defaultPrevented
-
eventPhase
-
isTrusted
-
DOMEvent nativeEvent
-
void preventDefault()
-
isDefaultPrevented()
-
void stopPropagation()
-
isPropagationStopped()
-
DOMEventTarget target
-
timeStamp
-
type
هنالك خاصيات إضافية متوافرة اعتمادًا على نوع أو تصنيف الحدث المستخدم. فعلى سبيل المثال، الحدث onClick
يحتوي على الخاصيات الآتية:
-
altKey
-
button
-
buttons
-
clientX
-
clientY
-
ctrlKey
-
getModifierState(key)
-
metaKey
-
pageX
-
pageY
-
DOMEventTarget relatedTarget
-
screenX
-
screenY
-
shiftKey
يحتوي الجدول الآتي على خصائص syntheticEvent المتاحة لكل تصنيف من تصنيفات الأحداث:
نوع الحدث | الأحداث | خاصيات متعلقة به |
---|---|---|
الحافظة |
|
|
التركيب |
|
|
لوحة المفاتيح |
|
|
التركيز |
|
|
النماذج |
|
|
الفأرة |
|
|
الاختيار |
|
|
اللمس |
|
|
واجهة المستخدم |
|
|
الدولاب |
|
|
الوسائط |
|
|
الصور |
|
|
الحركات |
|
|
الانتقالات |
|
|
ملاحظات
-
توحِّد React التعامل مع الأحداث لكي تسلك سلوكًا متماثلًا في جميع المتصفحات.
-
تنطلق الأحداث في React في مرحلة الفقاعات (bubbling phase). لإطلاق حدث في مرحلة الالتقاط (capturing phase) فأضف الكلمة
"Capture"
إلى اسم الحدث، أي أنَّ الحدثonClick
سيصبحonClickCapture
. -
إذا احتجتَ إلى تفاصيل كائن الأحداث المُنشَأ من المتصفح، فيمكنك الوصول إليه باستخدام الخاصية
nativeEvent
في كائنSyntheticEvent
المُمرَّر إلى دالة معالجة الأحداث في React. -
لا تربط React الأحداث إلى العقد نفسها، وإنما تستخدم «تفويض الأحداث» (event delegation).
-
يجب استخدام
e.stopPropagation()
أوe.preventDefault()
يدويًا لإيقاف انتشار الأحداث بدلًا من استخدامreturn false;
. -
لا تدعم React جميع أحداث DOM، لكن ما يزال بإمكاننا الاستفادة منها باستخدام توابع دورة الحياة في React.
ترجمة وبتصرف للفصل React Nodes من كتاب React Enlightenment
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.