كيف تستخدم Refs في React؟


في React Refs، يتم اختصار الكلمة references وهي مشابهة key في React ، وهي سمة تتيح لك تخزين مرجع محدد لعقد DOM أو عناصر التفاعل وكيفية التفاعل معها. نستخدمها عندما نريد تغيير قيمة المكون الفرعي دون استخدام props.


متى يجب استخدام Refs؟

يمكن استخدام Refs في الحالات التالية:

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


متى يجب ألا نستخدم Refs؟

  • تجنب استخدامه لأي شيء معلن. على سبيل المثال ، بدلاً من استخدام التابعين open () و close () على أحد المكونات ، نحتاج إلى إرسال خاصية تسمى isOpen.

  • يجب علينا تجنب الإفراط في استخدام Refs.


كيفية بناء Refs

في React، يمكن إنشاء Refs باستخدام React.createRef ()، ويمكن تخصيصها لعناصر React باستخدام سمة refوعادة ما يتم تخصيصه لخاصية معينة عند تكوين مكون ويمكن بعد ذلك الرجوع إليه في جميع أنحاء المكون.


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

 

كيفية الوصول إلى Refs

في react، عندما يتم إرسال ref إلى عنصر ضمن render، يمكن الوصول إلى مرجع node من خلال السمة الحالية ref.

const node = this.callRef.current; 

 

السمات المشتركة Refs

تختلف قيمة المرجع حسب (node):

  • عند استخدام سمة ref في عنصر html، فإن المرجع الذي تم إنشاؤه بواسطة React.createRef () يتلقى عنصر DOM الرئيسي باعتباره السمة الحالية.
  • إذا تم استخدام السمة ref في مكون مخصص، فإن الكائن ref يتلقى مثيل هذا المكون باعتباره السمة الحالية.
  • لا يمكن تعريف السمة ref على  function components  لأنها لا تحتوي على (instance).

 

اضافة ref إلى عناصر DOM

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

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
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 (  
      <div>  
        <h2>Adding Ref to DOM element</h2>  
        <input  
          type="text"  
          ref={this.callRef} />  
        <input  
          type="button"  
          value="Add text input"  
          onClick={this.addingRefInput}  
        />  
      </div>  
    );  
  }  
}  
export default App;

الناتج:

Refs في React


أضافة Ref إلى Class component

 في المثال التالي، أضفنا ref إلى  class component لتخزين المرجع.

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
function CustomInput(props) {  
  let callRefInput = React.createRef();  
   
  function handleClick() {  
    callRefInput.current.focus();  
  }  
   
  return (  
    <div>  
      <h2>Adding Ref to Class Component</h2>  
      <input  
        type="text"  
        ref={callRefInput} />  
      <input  
        type="button"  
        value="Focus input"  
        onClick={handleClick}  
      />  
    </div>  
  );  
}  
class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRefInput = React.createRef();  
  }  
   
  focusRefInput() {  
    this.callRefInput.current.focus();  
  }  
   
  render() {  
    return (  
      <CustomInput ref={this.callRefInput} />  
    );  
  }  
}  
export default App;

الناتج:

 

Refs في React


Callback refs

في react، هناك طريقة أخرى لاستخدام المراجع تسمى 'callback refs'، والتي تمنحنا مزيدًا من التحكم عند إعداد المراجع وعدم ضبطها. بدلاً من إنشاء refs بواسطة طريقة createRef ()، يسمح لك react بإنشاء طريقة لنقل callback function إلى سمة المرجع للمكون.

الكود التالي:

<input type="text" ref={element => this.callRefInput = element} />  

تُستخدم وظيفة callback function لتخزين المرجع إلى عنصر DOM في عينة ويمكن الوصول إليها في أي مكان.

وهي متوفرة على النحو التالي:

this.callRefInput.value

يساعدنا المثال التالي على فهم أفضل للعمل مع callback refs:

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
class App extends React.Component {  
    constructor(props) {  
    super(props);  
  
    this.callRefInput = null;  
  
    this.setInputRef = element => {  
      this.callRefInput = element;  
    };  
  
    this.focusRefInput = () => {  
      //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 (  
      <div>  
    <h2>Callback Refs Example</h2>  
        <input  
          type="text"  
          ref={this.setInputRef}  
        />  
        <input  
          type="button"  
          value="Focus input text"  
          onClick={this.focusRefInput}  
        />  
      </div>  
    );  
  }  
}  
export default App;


في المثال أعلاه، يستدعي  callback ref لتخزين المرجع في إدخال عنصر DOM عندما يتم تثبيت المكون ، وعندما لا يتم تحميل المكون ، فإنه يطلق عليه null.

يتم تحديث المراجع دائمًا قبل تنفيذ componentDidMount أو componentDidUpdate. 

Callback refs بين المكونات هو ما يمكنك القيام به من خلال الرجوع إلى الكائن ref الذي تم إنشاؤه باستخدام React.createRef ().

الناتج:

Refs في React


ارسال  Ref من مكون إلى آخر

إعادة توجيه المرجع Ref forwarding هي طريقة تستخدم لنقل  ref من خلال مكون إلى مكون تابع، ويمكن إنشاؤه باستخدام طريقة React.forwardRef ().

هذه التقنية مفيدة للمكونات ذات الترتيب الأعلى higher-order وتستخدم بشكل خاص في مكتبات المكونات القابلة لإعادة الاستخدام reusable.


مثال:

import React, { Component } from 'react';  
import { render } from 'react-dom';  
  
const TextInput = React.forwardRef((props, ref) => (  
  <input type="text" placeholder="Hello World" ref={ref} />  
));  
  
const inputRef = React.createRef();  
  
class CustomTextInput extends React.Component {  
  handleSubmit = e => {  
    e.preventDefault();  
    console.log(inputRef.current.value);  
  };  
  render() {  
    return (  
      <div>  
        <form onSubmit={e => this.handleSubmit(e)}>  
          <TextInput ref={inputRef} />  
          <button>Submit</button>  
        </form>  
      </div>  
    );  
  }  
}  
export default App; 


في المثال أعلاه، يوجد مكوِّن TextInput يحتوي على child كمدخل. الآن لنقل ref إلى  input:

قم أولاً بإنشاء ref ثم انقله إلى أسفل المرجع <{TextInput ref={inputRef>. ثم أرسل ref باعتباره المعامل الثاني لطريقة forwardRef (). ثم نرسل هذا المعامل لأسفل <{input ref={ref>. الآن قيمة عنصر DOM متاحة في inputRef.current.

 

طريقة UseRef () في React

تم تقديمه في الإصدار 16.7 وما فوق React. يساعد في الوصول إلى عناصر DOM ومن ثم يمكننا التفاعل مع عناصر DOM مثل focussing على عنصر الإدخال أو الوصول إلى قيمة عنصر الإدخال.


يُرجع الكائن ref حيث توجد السمة الحالية في المعلمة المرسلة.

Syntax

const refContainer = useRef(initialValue);  

في المثال أدناه، useRef هي وظيفة مخصصة لمتغير inputRef، ثم أدخل خاصية تسمى ref في عنصر html الذي تريد الرجوع إليه.

مثال:

function useRefExample() {  
  const inputRef= useRef(null);  
  const onButtonClick = () => {  
    inputRef.current.focus();  
  };  
  return (  
    <>  
      <input ref={inputRef} type="text" />  
      <button onClick={onButtonClick}>Submit</button>  
    </>  
  );  
}

 

نأمل أن تكون على دراية كاملة بمفاهيم Ref في React.


كلمات مفتاحية: