logo

TechCodeview

React Refs

Refs הוא הקיצור המשמש הפניות ב-React. זה דומה ל מפתחות ב-React. זוהי תכונה המאפשרת לאחסן הפניה לצמתי DOM או רכיבי React מסוימים. זה מספק דרך לגשת לצמתים של React DOM או לרכיבי React וכיצד ליצור איתם אינטראקציה. הוא משמש כאשר אנו רוצים לשנות את הערך של רכיב ילד, מבלי לעשות שימוש באביזרים.

מתי להשתמש ב-Refs

ניתן להשתמש ב-Refs במקרים הבאים:

  • כאשר אנו זקוקים למדידות DOM כגון ניהול מיקוד, בחירת טקסט או השמעת מדיה.
  • הוא משמש להפעלת אנימציות הכרחיות.
  • בעת שילוב עם ספריות DOM של צד שלישי.
  • זה יכול גם להשתמש כמו ב-callbacks.

מתי לא להשתמש ב-Refs

  • יש להימנע משימוש בו לכל דבר שניתן לעשות באופן הצהרתי . למשל, במקום להשתמש לִפְתוֹחַ() ו סגור() שיטות על רכיב Dialog, אתה צריך לעבור א פתוח להסתמך על זה.
  • אתה צריך להימנע משימוש יתר ב-Refs.

כיצד ליצור Refs

ב-React, ניתן ליצור Refs על ידי שימוש React.createRef() . ניתן להקצות אותו לרכיבי React דרך ref תְכוּנָה. הוא מוקצה בדרך כלל למאפיין מופע כאשר רכיב נוצר, ולאחר מכן ניתן להפנות אותו לכל אורך הרכיב.

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

כיצד לגשת ל-Refs

ב-React, כאשר רפר מועבר לרכיב בתוך שיטת render, ניתן לגשת להפניה לצומת דרך התכונה הנוכחית של ה-ref.

 const node = this.callRef.current;

Refs נכסים נוכחיים

ערך ref שונה בהתאם לסוג הצומת:

  • כאשר נעשה שימוש בתכונת ref באלמנט HTML, ה-ref נוצר עם React.createRef() מקבל את רכיב ה-DOM הבסיסי בתור שלו נוֹכְחִי תכונה.
  • אם נעשה שימוש בתכונת ref ברכיב מחלקה מותאמת אישית, אז אובייקט ref מקבל את רָכוּב מופע של הרכיב כמאפיין הנוכחי שלו.
  • לא ניתן להשתמש בתכונת ref על רכיבי פונקציה כי אין להם מקרים.

הוסף Ref לרכיבי DOM

בדוגמה שלהלן, אנו מוסיפים ref לאחסון ההפניה לצומת 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;

תְפוּקָה

React Refs

הוסף Ref לרכיבי Class

בדוגמה למטה, אנו מוסיפים ref לאחסון ההפניה לרכיב מחלקה.

דוגמא

 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;

תְפוּקָה

React Refs

שופטי התקשרות חוזרת

בתגובה, יש דרך נוספת להשתמש ב-refs שנקראת ' שופטים להתקשרות חוזרת וזה נותן יותר שליטה כשהשופטים נמצאים מַעֲרֶכֶת ו לא מוגדר . במקום ליצור refs לפי שיטת createRef(), React מאפשרת דרך ליצור refs על ידי העברת פונקציית callback לתכונת ref של רכיב. זה נראה כמו הקוד למטה.

 this.callRefInput = element} /&gt;

פונקציית ה-callback משמשת לאחסון הפניה לצומת 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' callback כדי לאחסן את ההפניה לרכיב ה-DOM הקלט כאשר הרכיב תושבות , ומתי הרכיב מפרקים , קוראים לזה עם ריק . שופטים תמיד עדכני לפני ה componentDidMount אוֹ componentDidUpdate שריפות. ה-callback refs עובר בין רכיבים זהה לזה שאתה יכול לעבוד עם object refs, אשר נוצר עם React.createRef().

תְפוּקָה

React Refs

העברת Ref מרכיב אחד לרכיב אחר

Ref Forward היא טכניקה המשמשת להעברת א ref דרך רכיב לאחד ממרכיביו הצאצאים. זה יכול להתבצע על ידי שימוש ב React.forwardRef() שיטה. טכניקה זו שימושית במיוחד עם רכיבים מסדר גבוה יותר ובשימוש מיוחד בספריות רכיבים הניתנות לשימוש חוזר. הדוגמה הנפוצה ביותר ניתנת להלן.

דוגמא

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

בדוגמה לעיל, יש רכיב קלט טקסט שיש לו ילד בתור שדה קלט. עכשיו, להעביר או להעביר את ref למטה לקלט, תחילה, צור ר'פ ולאחר מכן העביר את ה-Ref שלך כלפי מטה . לאחר מכן, React מעביר את השופט ל- קדימהRef לתפקד כארגומנט שני. לאחר מכן, אנו מעבירים את טיעון ה-Ref הזה אל . כעת, ניתן לגשת לערך של צומת ה-DOM בכתובת inputRef.current .

הגיבו עם useRef()

זה מוצג ב תגובה 16.7 וגרסה למעלה. זה עוזר לקבל גישה לצומת ה-DOM או לאלמנט, ואז נוכל ליצור אינטראקציה עם הצומת או האלמנט הזה של DOM, כגון מיקוד אלמנט הקלט או גישה לערך רכיב הקלט. זה מחזיר את האובייקט של מי .נוֹכְחִי נכס אותחל לארגומנט שעבר. האובייקט המוחזר נמשך לכל החיים של הרכיב.

תחביר

 const refContainer = useRef(initialValue);

דוגמא

בקוד למטה, useRef היא פונקציה שמוקצתת למשתנה, inputRef , ולאחר מכן מצורף לתכונה בשם ref בתוך אלמנט ה-HTML שבו אתה רוצה להתייחס.

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