TechCodeview

المراجع هو الاختصار المستخدم ل مراجع في رد الفعل. انه ايضا مشابه مفاتيح في رد الفعل. إنها سمة تجعل من الممكن تخزين مرجع إلى عقد DOM معينة أو عناصر React. يوفر طريقة للوصول إلى عقد React DOM أو عناصر React وكيفية التفاعل معها. يتم استخدامه عندما نريد تغيير قيمة مكون فرعي، دون استخدام الدعائم.

متى تستخدم المراجع

يمكن استخدام المراجع في الحالات التالية:

• عندما نحتاج إلى قياسات DOM مثل إدارة التركيز أو اختيار النص أو تشغيل الوسائط.
• يتم استخدامه في تشغيل الرسوم المتحركة الضرورية.
• عند التكامل مع مكتبات DOM التابعة لجهات خارجية.
• يمكن استخدامه أيضًا كما هو الحال في عمليات الاسترجاعات.

متى لا تستخدم المراجع

• وينبغي تجنب استخدامه لأي شيء يمكن القيام به تصريحيا . على سبيل المثال، بدلا من استخدام يفتح() و يغلق() أساليب على مكون الحوار، تحتاج إلى تمرير مفتوح دعم لذلك.
• يجب عليك تجنب الإفراط في استخدام المراجع.

كيفية إنشاء المراجع

في React، يمكن إنشاء المراجع باستخدام رد الفعل. createRef () . يمكن تعيينه لعناصر React عبر المرجع يصف. ويتم تعيينه بشكل شائع إلى خاصية مثيل عند إنشاء مكون، ومن ثم يمكن الرجوع إليه خلال المكون.

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } } 

كيفية الوصول إلى المراجع

في React، عندما يتم تمرير مرجع إلى عنصر داخل طريقة العرض، يمكن الوصول إلى مرجع إلى العقدة عبر السمة الحالية للمرجع.

 const node = this.callRef.current; 

المرجع الخصائص الحالية

تختلف قيمة المرجع حسب نوع العقدة:

• عند استخدام السمة ref في عنصر HTML، يتم إنشاء المرجع باستخدام رد الفعل. createRef () يتلقى عنصر DOM الأساسي باعتباره حاضِر ملكية.
• إذا تم استخدام السمة ref على مكون فئة مخصصة، فسيتلقى الكائن ref التابع المركبة مثيل المكون كخاصيته الحالية.
• لا يمكن استخدام السمة ref مكونات الوظيفة لأنه ليس لديهم مثيلات.

أضف مرجعًا إلى عناصر DOM

في المثال أدناه، نقوم بإضافة مرجع لتخزين المرجع إلى عقدة أو عنصر DOM.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App; 

انتاج |

أضف المرجع إلى مكونات الفصل

في المثال أدناه، نقوم بإضافة مرجع لتخزين المرجع إلى مكون فئة.

مثال

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App; 

انتاج |

مراجع رد الاتصال

في رد الفعل، هناك طريقة أخرى لاستخدام المراجع تسمى '' مراجع رد الاتصال 'ويعطي مزيدًا من التحكم عندما يكون الحكام كذلك تعيين و غير محدد . بدلًا من إنشاء مراجع باستخدام طريقة createRef()، تتيح React طريقة لإنشاء مراجع عن طريق تمرير دالة رد اتصال إلى السمة ref الخاصة بالمكون. يبدو مثل الكود أدناه.

 this.callRefInput = element} /> 

يتم استخدام وظيفة رد الاتصال لتخزين مرجع إلى عقدة DOM في خاصية المثيل ويمكن الوصول إليها في مكان آخر. ويمكن الوصول إليه على النحو التالي:

 this.callRefInput.value 

يساعد المثال أدناه على فهم عمل مراجع رد الاتصال.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App; 

في المثال أعلاه، ستستدعي React رد الاتصال 'ref' لتخزين المرجع إلى عنصر DOM المُدخل عندما يكون المكون يتصاعد ، وعندما يكون المكون غير تحميل ، اتصل به باطل . الحكام دائما حتى الآن قبل componDidMount أو componDidUpdate حرائق. إن مراجع رد الاتصال التي تمرر بين المكونات هي نفسها التي يمكنك العمل بها مع مراجع الكائنات، والتي يتم إنشاؤها باستخدام React.createRef().

انتاج |

إعادة توجيه المرجع من مكون إلى مكون آخر

إعادة توجيه المرجع هي تقنية تُستخدم لتمرير ملف المرجع من خلال مكون إلى أحد مكوناته الفرعية. ويمكن تنفيذ ذلك عن طريق الاستفادة من رد الفعل.forwardRef() طريقة. هذه التقنية مفيدة بشكل خاص مع مكونات ذات ترتيب أعلى وتستخدم خصيصًا في مكتبات المكونات القابلة لإعادة الاستخدام. ويرد أدناه المثال الأكثر شيوعا.

مثال

 import React, { Component } from 'react'; import { render } from 'react-dom'; const TextInput = React.forwardRef((props, ref) => ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}> Submit ); } } export default App; 

في المثال أعلاه، هناك مكون إدخال النص الذي يحتوي على طفل كحقل إدخال. الآن، لتمرير أو إعادة توجيه المرجع وصولاً إلى الإدخال، أولاً، قم بإنشاء مرجع ثم قم بتمرير المرجع الخاص بك إلى . بعد ذلك، تقوم React بإعادة توجيه المرجع إلى ملف إلى الأمامالمرجع تعمل كوسيطة ثانية. بعد ذلك، نعيد توجيه وسيطة المرجع هذه إلى . الآن، يمكن الوصول إلى قيمة عقدة DOM على inputRef.current .

التفاعل مع useRef()

يتم تقديمه في رد الفعل 16.7 وما فوق الإصدار. يساعد ذلك في الوصول إلى عقدة أو عنصر DOM، ومن ثم يمكننا التفاعل مع عقدة أو عنصر DOM مثل التركيز على عنصر الإدخال أو الوصول إلى قيمة عنصر الإدخال. تقوم بإرجاع كائن المرجع الذي .حاضِر تمت تهيئة الخاصية للوسيطة التي تم تمريرها. يستمر الكائن الذي تم إرجاعه طوال عمر المكون.

بناء الجملة

 const refContainer = useRef(initialValue); 

مثال

في الكود أدناه، استخدامالمرجع هي دالة يتم تعيينها لمتغير، مرجع الإدخال ، ثم يتم إرفاقه بسمة تسمى ref داخل عنصر HTML الذي تريد الرجوع إليه.

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () => { inputRef.current.focus(); }; return ( Submit ); }